jquery - How do I get the rows and columns from a tbody in javascript? - Stack Overflow

admin管理员组

文章数量:1315365

I'm trying to apply css classes to a calendar after it's been loaded. I've confirmed everything in the javascript and the method in the controller works as it should until I try to get the rows from the tbody. here's the javascript.

jQuery(document).ready(function() {
    var calendar = $('#Trafikkalender');
    var date = $('#selectedDate').val();
    var param = { date: date }
    var url = $('#calArrayPostUrl').data('url');
    $.post(url, param, function(data) {
        var body = calendar.find('tbody');

        //var rows = body.getElementsByTagName('tr');
        var rows = body.rows;

        for (var i = 0; i < rows.length; i++) {
            //var cols = rows[i].getElementsByTagName('td');
            var cols = rows[i].cells;
            for (var j = 0; cols.length; j++) {
                var col = cols[j];
                col.addClass(data[i][j]);
            }
        }
    });
});

when I hover over rows in the debugger in chrome it dsays that rows is undefined. as you can see I've tried another approach but getElementsByTagName is not a function according to chrome.

I'm trying to apply css classes to a calendar after it's been loaded. I've confirmed everything in the javascript and the method in the controller works as it should until I try to get the rows from the tbody. here's the javascript.

jQuery(document).ready(function() {
    var calendar = $('#Trafikkalender');
    var date = $('#selectedDate').val();
    var param = { date: date }
    var url = $('#calArrayPostUrl').data('url');
    $.post(url, param, function(data) {
        var body = calendar.find('tbody');

        //var rows = body.getElementsByTagName('tr');
        var rows = body.rows;

        for (var i = 0; i < rows.length; i++) {
            //var cols = rows[i].getElementsByTagName('td');
            var cols = rows[i].cells;
            for (var j = 0; cols.length; j++) {
                var col = cols[j];
                col.addClass(data[i][j]);
            }
        }
    });
});

when I hover over rows in the debugger in chrome it dsays that rows is undefined. as you can see I've tried another approach but getElementsByTagName is not a function according to chrome.

• javascript
• jquery

Share Improve this question Follow edited Jul 25, 2016 at 7:56 Álvaro González 147k4545 gold badges278278 silver badges376376 bronze badges asked Jul 25, 2016 at 7:14 user2283330user2283330 4

• Are you aware that jQuery has an .addClass() method? – Álvaro González Commented Jul 25, 2016 at 7:22
• look at the bottom of the inner for loop – user2283330 Commented Jul 25, 2016 at 7:23
• If that function is actually defined (which I don't think so) it cannot be jQuery.addClass() because col is not a jQuery object. I posed an answer with the details. – Álvaro González Commented Jul 25, 2016 at 10:37
• ah yes, I have since changed cols. it is now var col = $(cols[j]); – user2283330 Commented Jul 26, 2016 at 8:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can use this

$.post(url, param, function(data) {
    var body = calendar.find('tbody');
    var rows = body.find('tr');

    for (var i = 0; i < rows.length; i++) {
        var cols = $(rows[i]).find('td');
        for (var j = 0; cols.length; j++) {
            var col = cols[j];
            col.addClass(data[i][j]);
        }
    }
}

Hope this helps!!

You can use find() method passing the tag name:

 var rows = body.find('tr');

Same can be used for td elements too.

body is a jQuery object, not a DOM element:

var calendar = $('#Trafikkalender');
var body = calendar.find('tbody');

... so it doesn't have a rows property:

> console.log(body.rows);
undefined

Since you are already using jQuery you can fetch all items at once with a jQuery selector:

 body("td")

And if you prefer raw DOM elements you can extract them from the jQuery object:

 body[0].rows

本文标签： jqueryHow do I get the rows and columns from a tbody in javascriptStack Overflow