Wie kann ich onclick-Ereignis auf eine Spalte einer Tabelle?

Ich versuche, fügen Sie ein onclick-Ereignis auf eine Spalte einer Tabelle mit JavaScript. Zum Beispiel ein onclick-Ereignis aktiviert, auf der ersten oder zweiten Spalte! Die folgende Funktion ist für die Zeilen, ich brauche aber zum Bearbeiten dieser Funktion für bestimmte Spalten.

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for(i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = function (row) {
            return function () {
                var cell = row.getElementsByTagName("td")[0];
                var id = cell.innerHTML;
                alert("id:" + id);
            };
        };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
Ich sehe nicht ein einzelnes Fragezeichen in Ihr "die Frage"
Jamie Taylotr. Ich bearbeitet meine Frage. Ist das ok? 🙂
vielleicht ist Sie auf Klasse hinzufügen, um Zellen, die Sie wollen-Ereignis auf, dann binden Sie in die Klasse.
Wie kann ich mit der Klasse in dieser Funktion?(was ist die syntax?)
machen ein Klasse name für jedes "td", wie die Spalten-Nummer und überprüfen Sie es onClick auf alle " d " - tag !!

InformationsquelleAutor user2448849 | 2013-10-08

  1. 2

    Versuchen, diese arbeiten soln.

    function addRowHandlers() {
 var table = document.getElementById("tableId");
 var rows = table.getElementsByTagName("tr");

 for (i = 0; i < rows.length; i++) {
    var currentRow = table.rows[i];
    currentRow.onclick = createClickHandler(currentRow);
 }
}

function createClickHandler(row){

            return function() { 
                   var cell = row.getElementsByTagName("td")[0];//if you put 0 here then it will return first column of this row
                       var id = cell.innerHTML;
                        alert("id:" + id);
              };

}

addRowHandlers();

    Arbeiten Demo

    InformationsquelleAutor Anand Jha

  2. 1

    hinzufügen-Klasse, um den betroffenen Zeilen/Spalten würde flexibler sein.

    wenn Sie wissen, die Zeilen/Spalten so etwas wie dies tun (ungetestet), für die Zeilen 1 und 2:

    var $table = jQuery('#tableId');
var $rows = jQuery('tr:nth-child(0),tr:nth-child(1)', $table);
$rows
    .addClass('event-1')
    .click(function()
    {
      //do what on click event
      alert(jQuery(this).html());
    });

    InformationsquelleAutor gwillie

  3. 1

    Dies ist der code für return Zeile und Spalte Anzahl der Verwendung von jQuery, es muss hilfreich sein
    Jsfiddle link

    $('td').on('click',function() {
                var col = $(this).parent().children().index($(this));
                var row = $(this).parent().parent().children().index($(this).parent());
                alert('Row: ' + row + ', Column: ' + col);
            });

    InformationsquelleAutor chakroun yesser

  4. 0

    Können Sie nur die einzelnen onclick handler zu Ihrem Tisch, und dann erkennen Sie die angeklickte Spalte, diese Technik wird als Ereignis-delegation:

    document.getElementById("tableId").onclick = columnHandler;

function columnHandler(e) {
    e = e || window.event; //for IE87 backward compatibility
    var t = e.target || e.srcElement; //IE87 backward compatibility
    while (t.nodeName != 'TD' && t.nodeName != 'TH' && t.nodeName != 'TABLE') {
        t = t.parentNode;
    }
    if (t.nodeName == 'TABLE') {
        return;
    }
    var c = t.parentNode.cells;
    var j = 0;
    for (var i=0; i<c.length; i++){
        if (c[i] == t) {
            j = i;
        }
    }
    alert('You clicked on row #'+(j+1)+ ' , cell content = '+t.innerHTML);
}

    JSFiddle-Beispiel

    InformationsquelleAutor Stano

Schreibe einen Kommentar