Question

嘿，我有这段代码：

<body>
<table>
<tr>
<td class="first">100</td>
</tr>
</table>
<h4 class=curs style="display:none">10</h4>
    <script>
    document.body.onload = function(){
         var firstTdVal = document.getElementsByClassName('first')[0].innerHTML;
       var secondTdVal = document.getElementsByClassName('curs')[0].innerHTML;
       var valueToBeShown = parseInt(firstTdVal)/ parseInt(secondTdVal);
       document.getElementsByClassName('first')[0].innerHTML = valueToBeShown ;
    }
    </script>
</body>

如你所见＆＃34; .first＆＃34;有一个数字，这个数字被分为＆＃34; .curs＆＃34;结果显示在＆＃34; .first＆＃34;现在问题是，例如，我再添加100个td＆＃39;。第二，。第三......，。百＆＃34;在表格中。如何使脚本为所有td做同样的事情，就像它对＃34; .first＆＃34;（转到＆＃34; .curs＆＃34;）。我该怎么做这在我的JS中保持复杂。

Answer 1

使用document.querySelectorAll获取匹配元素数组（与CSS选择器匹配），然后使用forEach循环遍历它们，一次应用逻辑1 td。像这样：

// querySelector gets the first element matched. textContent get the text of that element
var cursValue = parseInt(document.querySelector(".curs").textContent);

// querySelectorAll get an array of all the matched elements
var tds = document.querySelectorAll("td");
// loop through that array one td at a time
tds.forEach(function(td){
    // get the text of the current td
    var value = parseInt(td.textContent);

    // if the value is not valid (a string for example) return and don't process anymore for this td (go straight to the next one).
    if(isNaN(value)) return;

    // calculate the new value
    value = value / cursValue;
    // change the text of this td (update it to the new value)
    td.textContent = value;
});

注意： querySelector和querySelectorAll使用CSS selectors匹配元素，因此要使用类匹配元素，选择器应为".className"，使用ID匹配它："#someID"，...接受所有CSS选择器（即使是这一个："#anID>li.some-class a:not([href])"）。

注意2： tds是一个数组，因此如果您不想使用forEach，则可以使用正常的for循环（{ {1}}）。

Answer 2

这会迭代你的表（确保设置表ID）（打开开发控制台来查看输出，但它非常直接。）

var table = document.getElementById("myTable");
for (var row of table.rows) {
    for (var col of row.cells) {
        console.log(col.className, col.innerHTML); //Class names and the values of the elements.
    }  
}

如果您需要更多帮助，请询问，因为我不完全了解您在此尝试做什么。

Answer 3

这是一种方法，您可以将第一个td中的数字除以第二个td中除以的数字，结果将放在第三个{{1}中}}

td

var trs = document.getElementsByTagName('tr');
for (var i = 0; i< trs.length; i++) {
  var tds = trs[i].getElementsByTagName('td'),
      first = tds[0].textContent,
      second = tds[1].textContent,
      third = tds[2],
      result = (parseInt(first) / parseInt(second));
  third.innerHTML = result;
}

重复多个元素的脚本

3 个答案: