作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个带有 div 和 span 的自定义表,我想在这个表上添加一个数组中的值,该数组遍历所有 span 单元格,但我真的不知道该怎么做。
<div class="cust_table">
<div id="mytab1" class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<div class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
</div>
<div class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
</div>
</div>
所以我有这个数组:
var arry = [];
for (var i = 1; i <= 3; i++) {
arry.push(i);
}
我想把它的所有值从 1 到 3 写在跨度单元格上
var sel = document.querySelectorAll(.cell);
最终将数组中的位置与行单元格中的位置进行匹配。
最佳答案
您可以使用 getElementsByClassName()
按类名获取元素 方法并在 Array.from()
的帮助下迭代它们 和 Array#forEach
方法。哪里 Array.from()
有助于将 Nodelist
转换为数组和 Array#forEach
有助于迭代它们。
var arr = [1, 2, 3, 4];
Array.from(document.getElementsByClassName('row')).forEach(function(ele) {
Array.from(ele.getElementsByClassName('cell')).forEach(function(e, i) {
e.textContent = arr[i];
});
})
<div class="cust_table">
<div id="mytab1" class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
</div>
<div class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
</div>
<div class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
</div>
</div>
仅供引用: Array.from()
方法是在 ES6 中引入的,所以使用 [].slice.apply()
对于较旧的浏览器,还要检查 polyfill option for Array#forEach
method .
Math.random()
从数组中随机添加元素生成索引 和更新。
var arr = [1, 2, 3];
Array.from(document.getElementsByClassName('cell')).forEach(function(e, i) {
// generate index value within `0` and `arr.length - 1` and get element
e.textContent = arr[Math.round(Math.random()*(arr.length-1))];
});
<div class="cust_table">
<div id="mytab1" class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
</div>
<div class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
</div>
<div class="row">
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
<span class="cell">***</span>
</div>
</div>
关于javascript - 遍历同一行的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38847333/
我是一名优秀的程序员,十分优秀!