jquery操作table备忘

最新推荐文章于 2018-09-30 08:43:28 发布

原创最新推荐文章于 2018-09-30 08:43:28 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

前端技术专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种在HTML表格中实现ID自增的方法，并通过JavaScript动态添加新的行，同时利用AJAX将新增的数据提交到服务器端。具体实现了在用户界面上添加一行带有自增ID的新记录，并能通过按钮触发数据保存。

效果如下：

实现ID自增长：

<table class="list" width="100%" targetType="navTab" asc="asc" desc="desc" layoutH="40">
		<thead>
			<tr>
				<th width="30%" style="text-align:center;">排序/编号</th>
				<th width="40%" style="text-align:center;">分类名称</th>
				<th width="30%" style="text-align:center;">操作</th>
			</tr>
		</thead>
		<tbody id="giftTypeList">
		</tbody>
	</table>

<input type="button" value="添加礼物类别" onclick="addGiftTypeInput();"/>

JS实现：

/**
 * 添加礼物类别输入框
 */
function addGiftTypeInput(){
	//得到最大的排序编号
	var maxSortId = 0;
	$("#giftTypeList").find("tr").each(function(index, domItem){
		var myvalue = parseInt($(domItem).find("td").eq(0).text());
		if(myvalue>maxSortId){
			maxSortId = myvalue;
		}
	});
	maxSortId = maxSortId +1;
	var dataHtml = '<tr>'+
		'<td align="center">'+ maxSortId +'</td>'+
		'<td align="center"> <input type="text" style="text-align: center; width:99%;" value=""/></td>'+
		'<td align="center"> <input type="button" onclick="submitGiftTypeData(this);" value="保存" /></td>'+
		'</tr> ';
	
	$("#giftTypeList",navTab.getCurrentPanel()).append(dataHtml);
}

function submitGiftTypeData(obj){
	var itemId = $(obj).parent().siblings().eq(0).text();
	var itemValue = $(obj).parent().siblings().eq(1).find("input").val();
	//提交json字符串
	$.ajax({
		type: "POST",
		url : 'submitVirtualGiftTypeData.do',
		data : {		
			"itemId" : itemId,
			"itemValue" : itemValue
		},
		secureuri : false,
		dataType : 'json',
		success : function(data, status) {
			var valueObj = data.message;
			$("#success",navTab.getCurrentPanel()).html(valueObj);
		},
		error : function(data, status, e) {
			alertMsg.info(e);
		}
	});
}