试图遍历表行数据

时间:2020-02-26 23:03:59

标签: javascript jquery html wordpress

这是我目前的代码,我在控制台中收到的错误消息之一是: TypeError:table.rows未定义

<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>

我的表数据有点混乱,因为我们使用的是Elemantor,但稍后在代码中将其注释掉。

欢迎您提出任何建议,谢谢。

1 个答案:

答案 0 :(得分:0)

document.getElementsByClassName返回类似数组的对象,因此您应该首先在该对象中找到表。假设它是文档中具有给定类的唯一表,则可以如下修改函数的第一行:

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

我不熟悉Elemantor,但似乎jet-table__body是您的<tbody>的类,而不是您的<table>的类。改用document.getElementsByClassName的类来调用<table>会有所帮助。