Jqeury获取table当前行与指定列

今天遇到了一个Jqeury获取table当前行与指定列的问题:

大概的实现要求是一个页面中，上面有几个input输入框，下面有一个table，当在输入框中输入内容的时候，点击添加按钮的时候，在下面table中追加对应的代码，同时每行有编辑、删除的操作。类似下面的页面操作：

下面是addTable()，就是点击按钮之后追加tr的操作

  function addTable() {

 ………………

            //得到每个input的值

             var goodsClassVar = $("#goodsClass").val();

             var goodsSubClassVar = $("#goodsSubClass").val();

             var pcsVar = $("#pcs").val();

             var classifierVar = $("#classifier").val();

             var remarkVar = $("#remark").val();

             var rAwbState = $("#resultAwbState").val();

            // 追加html语句

             var tr = "<tr><td style=\"display: none\">" + id + "</td><td name=\"goodsClass\">" + goodsClassVar + "</td><td name=\"goodsSubClass\">" + goodsSubClassVar + "</td><td name=\"pcs\">" + pcsVar +

                     "</td><td name=\"classifier\">" + classifierVar + "</td><td name=\"remark\">" + remarkVar + "</td><td>" +

                     "<a class=\"bs-btn bs-btn-sm bs-btn-default\" name=\"edit\" onclick=\"editTable(this)\"><span>编辑</span></a>" +

                     "<a class=\"bs-btn bs-btn-sm bs-btn-default\" name=\"del\" onclick=\"delTable(this)\"><span>删除</span></a>" + "</td></tr>";

             $("#tablelist").append(tr);

 ………………

     }

添加数据之后的table样式如下面所示：

Jqeury获取table当前行与指定列

之后是要求点击“编辑”按钮之后，获得当前行的信息，当然上面的代码中可以看出我是把信息的主键id所在的td列给隐藏了。下面就是editTable()的函数，点击编辑的操作：

  function editTable(id) {

         //得到当前所在行

         var rows = id.parentNode.parentNode.rowIndex;

         //得到所在行的第一列的内容

         var recId = $("#tablelist tr:eq(" + rows + ") td:eq(0)").html()

 }

主要的方法就是 $("table的id tr:eq(第几行) td:eq(第几列)").html()

因为对JQuery的知识懂得非常的少，今天的这个小小的问题困扰了我好久，就记录下来，以防以后忘记。当然能帮助到别人更好！

秒客网

Jqeury获取table当前行与指定列

相关文章