javascript onclick事件在数据表中打开模型

我正在使用数据表格显示在网格中的值，我实现了单击事件的JavaScript来打开模式，而且这种模式显示单击行中的所有值。 现在，无论我点击模式打开的表格行。 现在我想阻止它，它应该打开某一列的onclicking。 我的代码是这样的

(function() { if (window.addEventListener) { window.addEventListener('load', run, false); } else if (window.attachEvent) { window.attachEvent('onload', run); } function run() { var t = document.getElementById('myTable'); t.onclick = function(event) { $('#modal2').modal(); event = event || window.event; //IE8 var target = event.target || event.srcElement; while (target && target.nodeName != 'TR') { // find TR target = target.parentElement; } //if (!target) { return; } //tr should be always found var cells = target.cells; //cell collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement //var cells = target.getElementsByTagName('td'); //alternative if (!cells.length || target.parentNode.nodeName == 'THEAD') { return; } var f1 = document.getElementById('prdctid'); var f2 = document.getElementById('prdctname'); var f3 = document.getElementById('prdctmodel'); var f4 = document.getElementById('prdctversion'); var f5 = document.getElementById('prdctlanguage'); f1.value = cells[1].innerHTML; f2.value = cells[2].innerHTML; f3.value = cells[3].innerHTML; f4.value = cells[4].innerHTML; f5.value = cells[5].innerHTML; //console.log(target.nodeName, event); }); } })(); 

我试了下面的代码，它只为第一行工作。

 (function() { if (window.addEventListener) { window.addEventListener('load', run, false); } else if (window.attachEvent) { window.attachEvent('onload', run); } function run() { // var t = document.getElementById('myTable'); // t.onclick = function(event) { $('#myTable').on('click', 'tr td:eq(4)', function(event) { $('#modal2').modal(); event = event || window.event; //IE8 var target = event.target || event.srcElement; while (target && target.nodeName != 'TR') { // find TR target = target.parentElement; } //if (!target) { return; } //tr should be always found var cells = target.cells; //cell collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement //var cells = target.getElementsByTagName('td'); //alternative if (!cells.length || target.parentNode.nodeName == 'THEAD') { return; } var f1 = document.getElementById('prdctid'); var f2 = document.getElementById('prdctname'); var f3 = document.getElementById('prdctmodel'); var f4 = document.getElementById('prdctversion'); var f5 = document.getElementById('prdctlanguage'); f1.value = cells[1].innerHTML; f2.value = cells[2].innerHTML; f3.value = cells[3].innerHTML; f4.value = cells[4].innerHTML; f5.value = cells[5].innerHTML; //console.log(target.nodeName, event); }); } })(); 

Answer 1

您的select器稍微closures。

$('#myTable').on('click', 'tr td:eq(4)', function(event) {

应该

$('#myTable tr').on('click', 'td:eq(4)', function(event) {

您的原始方法将监听器应用到表，然后每个tr并find＃4的td 。 这是原始select器上的＃4 – #myTable ，其中只有一个。 这个改变将把侦听器应用到table每个tr上，并在每一行中find＃4的td 。

顺便说一句，您已经将jQuery引入到您的代码中了，但您现在应该更改文件中的所有内容以使用它。 摆脱香草的JS（ .innerHTML ， document.getElementById ， target.parentElement等），并使用jQuery等效。 （ $jqEl.html() ， $('#id')和$jqEl.parent() ）。

这是一个修改select器的小提琴。

我build议重构你的代码，像这样的东西。

 $(document).ready(function(){ var $table = $('#myTable'); var $modal2 = $('#modal2'); $modalProductIdInput = $('#prdctid'); $modalProductNameInput = $('#prdctname'); // etc etc $table.on('click', 'tr td:eq(4)', function(event) { $modal2.modal(); var $clickedCell = $(this); var $parentRow = $clickedCell.parent(); var $rowCells = $parentRow.children() var productId = $rowCells[1]; var productName = $rowCells[2]; // etc etc $modalProductIdInput.value = productId; $modalProductNameInput.value = productName; }); }); 

我没有testing过，但是看起来大致正确。 希望这可以帮助！