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

Question

我正在使用数据表来显示网格中的值，我在点击事件上实现了 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

您的选择器略有偏差。

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

应该是

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

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

顺便说一句，很高兴您在代码中引入了 jQuery，但是您现在应该更改文件中的所有内容以使用它。摆脱原始 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;
    });
});

我没有测试上面的内容，但它看起来大致正确。希望这对您有所帮助!