Javascript onclick-Ereignis zum Öffnen eines Modells in Datatabellen

Question

Ich verwende Datentabellen, um die Werte im Raster anzuzeigen, habe ich Javascript auf Click-Ereignis implementiert, um ein Modal zu öffnen, und auch dieses Modal zeigt alle Werte in der angeklickten Zeile. Jetzt, wo ich auf die Tabellenzeile klicke, öffnet sich das Modal. jetzt will ich das verhindern und es sollte sich beim einklicken einer bestimmten spalte öffnen. Mein Code ist wie folgt

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

})(); 

Ich habe den folgenden Code versucht es funktioniert nur für die erste Zeile.

(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

Ihr Wahlschalter ist leicht aus.

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

sollte

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

4 Ihre ursprüngliche Methode den Hörer auf den Tisch gelten würde, und dann jedes tr und die td finden, die # ist. Das ist # 4 auf dem ursprünglichen Selektor - #myTable, von denen es nur einen gibt. Die Änderung wird den Hörer auf jede tr auf der table anwenden, und finden Sie die td, die # 4 in jeder Zeile ist.

Nebenbei ist es großartig, dass Sie jQuery in Ihren Code eingeführt haben, aber Sie sollten jetzt alles in der Datei ändern, um es zu verwenden. Entfernen Sie die Vanille JS (.innerHTML, document.getElementById, target.parentElement usw.) und verwenden Sie die jQuery-Entsprechungen. ($jqEl.html(), $('#id') und $jqEl.parent()).

Here's a fiddle with the amended selector.

Ich würde vorschlagen, Ihren Code Refactoring wie dies some.

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

Ich habe das oben nicht getestet, aber es sieht in etwa richtig aus. Hoffe das hilft!