Question

我目前对javascript很陌生，只是尝试学习一些基本知识。我在其他语言中还不错，所以我确实了解概念等。

例如，我有一个包含10行的表，其中一个单元格是“ CaseID”，并且每一行都存在。我试图使用Math.Random属性生成随机数。

我首先遇到的问题是我在HTML中使用了ID属性，显然这是唯一的，接下来我使用了类。我试图在输出上附加一个索引，但这再次仅适用于第一个单元格，其余的均无效。

HTML：

return (
  <p className="text-left m-3">
     {this.state.movies ? <span>Showing <strong>{this.state.movies.length}</strong></span> : 
                          <span>DB is empty</span>
     }
  </p>
);

JS：

<td class="caseID"></td>

这对于第一个单元格/行都非常有用，但是每隔一行返回空白。我假设是因为我可能需要创建一个数组/索引，但不确定如何执行此操作。

我可以创建一个变量吗？

var caseID = Math.floor((Math.random() * 10000));
document.getElementsByClassName("caseID")[0].innerHTML = caseID;

也许写foreach等？再次不确定如何执行此操作。

谢谢！

Answer 1

您可以尝试这样的foreach，这将是一种更轻松的语法

document.getElementsByClassName("caseID").forEach(function(element) {
    var caseID = Math.floor((Math.random() * 10000));
    element.innerHTML = caseID;
})

您可以使用旧的for循环，使用更“分离步骤”的方式，这可以帮助您了解更多javascript的工作原理。我将使用querySelectorAll，但您可以使用getElementsByClassName

var myTds = document.querySelectorAll('caseID');
// You don't want to calculate the length at each loop
for (var i = 0, length = myTds.length; i < length; i++) {
    var caseID = Math.floor((Math.random() * 10000));
    var element = myTds[i];
    element.innerHTML = caseID;
}

希望有帮助

Answer 2

如何？

var tds = document.getElementsByClassName("caseID");

if ( tds.length ) { // just a check to make sure you've found somethiung
    var caseID = Math.floor((Math.random() * 10000));

    for(i = 0; i < tds.length; i++) {
        tds[i].innerHTML = caseID;

        caseID = Math.floor((Math.random() * 10000));
    }
}

Answer 3

您可以通过在javascript中为类元素编写foreach来做到这一点。

var cases_list = document.querySelectorAll('.caseID');
Array.prototype.forEach.call(cases_list, function(elements, index) {
    // conditional here.. access elements
});

如果您使用的是jQuery，则可以通过

$('.caseID').each(function(index, obj){
   //you can use this to access the current item
});

更新JavaScript中的多个表格行

3 个答案: