标签:nod 按钮 str index jquer parent var 分享 awb
今天遇到了一个Jqeury获取table当前行与指定列的问题:
大概的实现要求是一个页面中,上面有几个input输入框,下面有一个table,当在输入框中输入内容的时候,点击添加按钮的时候,在下面table中追加对应的代码,同时每行有 编辑、删除的操作。类似下面的页面操作:
下面是addTable(),就是点击按钮之后追加tr的操作
1 function addTable() { 2 ……………… 3 //得到每个input的值 4 var goodsClassVar = $("#goodsClass").val(); 5 var goodsSubClassVar = $("#goodsSubClass").val(); 6 var pcsVar = $("#pcs").val(); 7 var classifierVar = $("#classifier").val(); 8 var remarkVar = $("#remark").val(); 9 var rAwbState = $("#resultAwbState").val(); 10 // 追加html语句 11 var tr = "<tr><td style=\"display: none\">" + id + "</td><td name=\"goodsClass\">" + goodsClassVar + "</td><td name=\"goodsSubClass\">" + goodsSubClassVar + "</td><td name=\"pcs\">" + pcsVar + 12 "</td><td name=\"classifier\">" + classifierVar + "</td><td name=\"remark\">" + remarkVar + "</td><td>" + 13 "<a class=\"bs-btn bs-btn-sm bs-btn-default\" name=\"edit\" onclick=\"editTable(this)\"><span>编辑</span></a>" + 14 "<a class=\"bs-btn bs-btn-sm bs-btn-default\" name=\"del\" onclick=\"delTable(this)\"><span>删除</span></a>" + "</td></tr>"; 15 $("#tablelist").append(tr); 16 ……………… 17 }
添加数据之后的table样式如下面所示:
之后是要求点击“编辑”按钮之后,获得当前行的信息,当然上面的代码中可以看出我是把信息的主键id所在的td列给隐藏了。下面就是editTable()的函数,点击编辑的操作:
1 function editTable(id) { 2 //得到当前所在行 3 var rows = id.parentNode.parentNode.rowIndex; 4 //得到所在行的第一列的内容 5 var recId = $("#tablelist tr:eq(" + rows + ") td:eq(0)").html() 6 7 }
主要的方法就是 $("table的id tr:eq(第几行) td:eq(第几列)").html()
因为对JQuery的知识懂得非常的少,今天的这个小小的问题困扰了我好久,就记录下来,以防以后忘记。当然能帮助到别人更好!
标签:nod 按钮 str index jquer parent var 分享 awb
原文地址:http://www.cnblogs.com/eoooxy/p/6016947.html