用表格行中的所有值填充 JS 数组
我几乎没有使用过javascript，我被困住了：
我有一张带 id 的桌子JamTable
我正在尝试编写一些 JS，它将<td>为单击的任何行获取每个值的数组，以便我可以在弹出窗口中显示它，使用 ajax 调用通过 POST 请求将其返回到服务器，然后更新表上的元素，因此不需要回发 - 但到目前为止，我什至无法填充数组。
我有：
$(document).ready(function () {
// Get all table row elements <tr> in table 'JamTable' into var 'tr'
var tr = $('#JamTable').find('tr');
// Bind a 'click' event for each of those <tr> row elements
tr.bind('click', function (e) {
// so that when a row is clicked:
var r = $(this).closest('tr').row;
var myArray = new Array(r.cells);
for (var c = 0, col; col = r.cells[c]; c++) {
alert(col.text)
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JamTable">
<tbody>
<tr>
<td>1</td>
<td>JAM</td>
<td>0.004</td>
</tr>
<tr>
<td>3</td>
<td>BOB</td>
<td>0.24</td>
</tr>
<tr>
<td>9</td>
<td>Nasty Simon</td>
<td>94.3</td>
</tr>
</tbody>
</table>
是的，当谈到 JS 时，我完全迷失了
繁华开满天机4回答
-
拉丁的传说
在这种情况下，使用适当的事件委托是成功的关键。即使使用动态添加的行（在定义事件侦听器后添加到DOM ），也可以保证在行上捕获“单击”事件细分（见评论）：const tableElm = document.querySelector('table')// listen to "click" event anywhere on the <table>tableElm.addEventListener('click', onTableClick)function onTableClick(e){ // event delegation const rowElm = e.target.closest('tr') // traverse each child of the row (HTMLCollection). map the text value into an Array // https://stackoverflow.com/a/34250397/104380 const values = rowElm ? [...rowElm.children].map(td => td.innerText) : [] // print result console.clear() console.log( values )}<table> <tbody> <tr> <td>1</td> <td>JAM</td> <td>0.004</td> </tr> <tr> <td>3</td> <td>BOB</td> <td>0.24</td> </tr> <tr> <td>9</td> <td>Nasty Simon</td> <td>94.3</td> </tr> </tbody></table>如果您将数据发送回服务器，您可能还应该有一些唯一的 id <tr>，它可能需要知道它属于哪一行 -
慕无忌1623718
您可以从 委派事件tr。点击它得到children. 使用Array.from将创建一个数组td。用于迭代map并从中获取文本td$("#JamTable").on('click', 'tr', function(e) { let k = Array.from($(this).children()).map((item) => { return item.innerHTML; }) console.log(k)})td { border: 1px solid green; cursor: pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id='JamTable'> <tbody> <tr> <td>1</td> <td>JAM</td> <td>0.004</td> </tr> <tr> <td>3</td> <td>BOB</td> <td>0.24</td> </tr> <tr> <td>9</td> <td>Nasty Simon</td> <td>94.3</td> </tr> </tbody></table> -
四季花海
你不需要jquery。您可以使用querySelectorAll来获取trs 并简单地使用节点上的子tr节点来获取tdsconst trs = [...document.querySelectorAll('tr')]trs.forEach(tr => tr.addEventListener('click', e => { // whenever it is clicked, get its tds const values = [...tr.children].map(td => td.innerText) console.log('click', values)}, false))<table> <tbody> <tr> <td>1</td> <td>JAM</td> <td>0.004</td> </tr> <tr> <td>3</td> <td>BOB</td> <td>0.24</td> </tr> <tr> <td>9</td> <td>Nasty Simon</td> <td>94.3</td> </tr> </tbody></table>正如@vsync 建议的那样，最好使用事件委托，以防您有很多行以避免绑定多次点击。这也允许稍后添加更多行，而无需绑定更多点击处理程序edit2 仍然感谢@vsync，避免使用onclick并更喜欢addEventListener避免覆盖现有事件const table = document.querySelector('table')table.addEventListener('click', e => { if (e.target.nodeName !== 'TD') { return } const values = [...e.target.parentNode.children].map(c => c.innerText) console.log(values)}, false)<table> <tbody> <tr> <td>1</td> <td>JAM</td> <td>0.004</td> </tr> <tr> <td>3</td> <td>BOB</td> <td>0.24</td> </tr> <tr> <td>9</td> <td>Nasty Simon</td> <td>94.3</td> </tr> </tbody></table> -
侃侃尔雅
$('#JamTable tbody tr').click(function () { var arr = []; $($(this).children('td')).each(function (index, val) { arr.push(val.innerText); }); console.log(arr);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="JamTable"> <tbody> <tr> <td>1</td> <td>JAM</td> <td>0.004</td> </tr> <tr> <td>3</td> <td>BOB</td> <td>0.24</td> </tr> <tr> <td>9</td> <td>Nasty Simon</td> <td>94.3</td> </tr> </tbody></table>
随时随地看视频慕课网APP
相关分类
JavaScript