今天遇到了一個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的知識懂得非常的少，今天的這個小小的問題困擾了我好久，就記錄下來，以防以后忘記。當然能幫助到別人更好！