更新JavaScript中的多個表格行

Question

我目前對javascript很陌生，只是嘗試學習一些基本知識。 我在其他語言中還不錯，所以我確實了解概念等。

我有一個包含10行的表，例如，單元格之一是“ CaseID”，並且每一行都存在。 我試圖使用Math.Random屬性生成隨機數。

我首先遇到的問題是我在HTML中使用了ID屬性，顯然這是唯一的，接下來我使用了類。 我試圖在輸出上附加索引，但這再次僅適用於第一個單元格，其余的均無效。

HTML：

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

JS：

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

這對於第一個單元格/行都非常有用，但是每隔一行返回空白。 我假設是因為我可能需要創建一個數組/索引，但不確定如何執行此操作。

我可以創建一個變量：

var tds = document.getelementsbyclassname("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
});