HTML Table onClick函數獲取表行鍵和值

Question

我想用onclick函數創建一個HTML表來獲取行的鍵和值，到目前為止，onclick函數可以正常工作，但是它為我顯示了一個空數組，我該如何解決這個問題。 謝謝。

當您單擊第一行時，我希望它以這種格式顯示在控制台日志中：

{ "name":"Clark", "age":29};

這是我的代碼

 var table = document.getElementById("tableID"); if (table != null) { for (var i = 0; i < table.rows.length; i++) { table.rows[i].onclick = function() { tableText(this); }; } } function tableText(tableRow) { var myJSON = JSON.stringify(tableRow); console.log(myJSON); } 

 <table align="center" id="tableID" border="1" style="cursor: pointer;"> <thead> <tr> <th hidden="hidden"></th> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <td >Clark</td> <td>29</td> </tr> <tr> <td >Bruce</td> <td>30</td> </tr> </tbody> </table> 

Answer 1

我認為您可以使用tr.innerTest來獲取標簽中的值

Answer 2

我編輯了答案以將數據作為對象返回。 運行腳本，看看。

 var table = document.getElementById("tableID"); if (table) { for (var i = 0; i < table.rows.length; i++) { table.rows[i].onclick = function() { tableText(this); }; } } function tableText(tableRow) { var name = tableRow.childNodes[1].innerHTML; var age = tableRow.childNodes[3].innerHTML; var obj = {'name': name, 'age': age}; console.log(obj); } 

 <table align="center" id="tableID" border="1" style="cursor: pointer;"> <thead> <tr> <th hidden="hidden"></th> <th>name</th> <th>age</th> </tr> </thead> <tbody> <tr> <td >Clark</td> <td>29</td> </tr> <tr> <td >Bruce</td> <td>30</td> </tr> </tbody> </table> 

Answer 3

如果您使用的是jQuery，則可以像這樣向表中添加一個事件監聽器

 $('#tableID').on('click', 'tr', function(e){ tableText($(this).html()); }); function tableText(tableRow) { var myJSON = JSON.stringify(tableRow); console.log(myJSON); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <table align="center" id="tableID" border="1" style="cursor: pointer;"> <tr> <td>Text</td> <td>MoreText</td> <td>Lorem</td> <td>Ipsum</td> </tr> <tr> <td>Text</td> <td>MoreText</td> <td>Lorem</td> <td>Ipsum</td> </tr> <tr> <td>Text</td> <td>MoreText</td> <td>Lorem</td> <td>Ipsum</td> </tr> <tr> <td>Text</td> <td>MoreText</td> <td>Lorem</td> <td>Ipsum</td> </tr> </table> 

Answer 4

有許多方法可以完成您要執行的操作，但是，一種可靠且可擴展的方法是從表標題行中獲取屬性名稱，然后從被單擊的行中獲取值。

我不知道為什么您在標題中隱藏了單元格，這只會使事情變得復雜。 如果將其用於數據，則在表或行的關聯對象或data-*屬性中會更好。

 function getRowDetails(event) { row = this; var table = row.parentNode.parentNode; var header = table.rows[0]; // Get property names from header cells var props = [].reduce.call(header.cells, function(acc, cell ) { if (!cell.hasAttribute('hidden')) { acc.push(cell.textContent); } return acc; }, []); // Get value for each prop from data cell clicked on var result = props.reduce(function(acc, prop, i) { acc[prop] = row.cells[i].textContent; return acc; }, {}); // Do something with result console.log(result); return result; } // Add listener to body rows, could also put single listener on table // and use event.target to find row window.onload = function() { [].forEach.call(document.getElementsByTagName('tr'), function(row, i) { if (i) row.addEventListener('click', getRowDetails, false); }); } 

 <table align="center" id="tableID" border="1"> <thead> <tr><th hidden="hidden"></th><th>name</th><th>age</th></tr> </thead> <tbody style="cursor: pointer;"> <tr><td >Clark</td><td>29</td></tr> <tr><td >Bruce</td><td>30</td></tr> </tbody> </table>