Question

我正在使用数据表来显示网格中的值，我在点击事件上实现了javascript以打开模态，此模式还显示了单击行中的所有值。现在，当我点击表格行时，模态正在打开。现在我想阻止它，它应该打开某个列的单击。我的代码就像这样

(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

您的选择器稍微关闭。

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

应该是

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

您的原始方法会将侦听器应用于表，然后是每个tr并找到＃4的td。这是原始选择器上的＃4 - #myTable，其中只有一个。更改将应用于tr上每个table的听众，并在每行上找到＃4 的td。

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

Here's a fiddle with the amended selector.

我建议您将代码重构为这样的代码。

$(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; }); });

我没有测试过上述情况，但看起来大致正确。希望这有帮助！

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

1 个答案: