Javascript щелчок TD и получение данных ячейки строки

Question

У меня это в Jquery все работает:

$(document).ready(function() {

    $("#checktable td:nth-child(1)").click(function(event){ //  This line I need converted
        event.preventDefault();

        var $td = $(this).closest('tr').children('td'); //This line I need converted
        var tid = $td.eq(0).text();
        var tdate = $td.eq(1).text();
        var tdescribe = $td.eq(2).text();
        var wd = $td.eq(3).text();
        var dep = $td.eq(4).text();

        // ... more code

Мне нужно аналогичное в javascript, выше нажимается только первый td.

Мой javascript код пока:

function addRowHandlers() {
    var table = document.getElementById("checktable2");
    var rows = table.getElementsByTagName('tr');
    var tid = '';
    var tdate = '';
    var tdescribe = '';
    var wd = '';
    var dep = '';
    var tisclr = '';

    for (var i = 1; i < rows.length; i++) {
        rows[i].i = i;
        rows[i].onclick = function() {
            tid = table.rows[this.i].cells[0].innerText;
            tdate = table.rows[this.i].cells[1].innerHTML;
            tdescribe = table.rows[this.i].cells[2].innerHTML;
            wd = table.rows[this.i].cells[3].innerHTML;
            dep = table.rows[this.i].cells[4].innerHTML;

            // ... etc more code

javascript работает, но можно щелкнуть любой td, я только после:

• первый td щелкнул
• Затем получить родительская строка
• Затем все дочерние td

Я просмотрел десятки сообщений StackOverflow и других сайтов ... Спасибо

И как мне добавить event.preventDefault() на обычный JS в таком случае.

Answer 1

Вы должны привязать обработчик к первому .cell.

rows[i].cells[0].onclick = function () {

А затем в обработчике получить доступ к .parentNode из this, чтобы получить строку.

И поскольку вы не закрываете никакие переменные, кроме тех, которые находятся в самой функции (и, конечно, за пределами этой функции), я бы просто использовал один обработчик вместо того, чтобы воссоздавать его в l oop.

function addRowHandlers() {
    var table = document.getElementById("checktable2");
    var rows = table.getElementsByTagName('tr');
    var tid = '';
    var tdate = '';
    var tdescribe = '';
    var wd = '';
    var dep = '';
    var tisclr = '';

    for (var i = 1; i < rows.length; i++) {
        rows[i].i = i;
        rows[i].cells[0].onclick = handler;
    }
    function handler() {
            var row = this.parentNode;

            tid = this.innerText;
            tdate = row.cells[1].innerHTML;
            tdescribe = row.cells[2].innerHTML;
            wd = row.cells[3].innerHTML;
            dep = row.cells[4].innerHTML;

           // etc more code
    }
}

Я бы, наверное, использовал al oop, чтобы получить желаемый контент. Может быть так:

function handler() {
    var row = this.parentNode;
    var props = ["tid", "tdate", "tdescribe", "wd", "dep"];
    var content = props.reduce(function(obj, key, i) {
       obj[key] = row.cells[i][i ? "innerHTML" : "innerText"];
       return obj;
    }, {});

           // etc more code
}

Теперь вместо переменных у вас есть свойства объекта content.