Trying to loop through table row data

Question

Here's my code currently, one of the error messages I'm recieving in the console is: TypeError: table.rows is undefined

<html>
<body>
<center>
<button onclick="generate();">Generate Link</button>

<p id="link"></p>

<script>
function generate() {
        var table = document.getElementsByClassName("jet-table__body");

        for (var i = 0 ; i < table.rows.length; i++) {

            var row = "";

            for (var j = 0; j < table.rows[i].cells.length; j++) {

                row += table.rows[i].cells[j].innerHTML;
                row += " | ";
            }
        }

            document.getElementById("link").innerHTML = "Output " + row;
} 

//<tbody class="jet-table__body"><tr class="jet-table__body-row elementor-repeater-item-2ff5154"><td class="jet-table__cell elementor-repeater-item-19d06f7 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text"><input type="checkbox" id="course_1" value="sexualmisconduct"></div></div></div></td><td class="jet-table__cell elementor-repeater-item-68f78f2 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text">Sexual Misconduct</div></div></div></td><td class="jet-table__cell elementor-repeater-item-3265bce jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text">Desription here</div></div></div></td><td class="jet-table__cell elementor-repeater-item-ed15953 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-img jet-table__cell-img--before"><img src="image" alt="" srcset="imagesizes="(max-width: 150px) 100vw, 150px" width="150" height="150"></div></div></div></td><td class="jet-table__cell elementor-repeater-item-0d8ca23 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text"><a href="link">Trailer</a></div></div></div></td></tr><tr class="jet-table__body-row elementor-repeater-item-6027947"><td class="jet-table__cell elementor-repeater-item-199b2c7 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text"><input type="checkbox" id="course_2" value="negotiations"></div></div></div></td><td class="jet-table__cell elementor-repeater-item-2753fdb jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text">Negotiations</div></div></div></td></tr></tbody>

</center>
</body>
</html>

My table data is a bit of a mess because we're using Elemantor but it's commented out later in the code.

Any advice is welcome, thank you in advance.

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — , Feb 26 '20 at 23:11

score 0 · Answer 1 · answered Feb 26 '20 at 23:27

document.getElementsByClassName returns an array-like object so you should first find your table in that object. Assuming it is the only table in the document with the given class, you can modify the first line of the function as below:

var table = document.getElementsByClassName("jet-table__body")[0];

I am not familiar with Elemantor but it seems like jet-table__body is the class of your <tbody>, not your <table>. Calling document.getElementsByClassName with the class of your <table> instead can help.

Trying to loop through table row data

1 Answers1