javascript - 将变量分配给单个表格单元格
问题描述
我正在尝试将图像放在表格中。我有这个工作,如果你点击,你会循环浏览可用的选项。但是,计数器与单元格无关,它是一个全局计数器。有没有办法制作一个局部变量,以跟踪单个单元格在数组中的位置?
我试过制作一个局部变量,只针对一个单元格,但它不起作用。
下面是js中的相关函数:
var i = 1;
var table = document.getElementsByTagName('table')[0];
var def = ["tex/white.png", "tex/grass.jpg", "tex/stone.jpg", "tex/water.jpg", "tex/wood.jpg", "tex/lava.jpg"];
table.onclick = function(e) {
var target = (e || window.event).target;
if (target.tagName in { TD: 1, TH: 1 }) {
target.className = "img";
console.log((e || window.event).target);
target.setAttribute('style', 'background-image:' + "url(" + def[i] + ")");
if (i < def.length) {
i++
}
if (i == def.length) {
i = 0;
}
}
};
这是我到目前为止所做的工作小提琴:
https ://jsfiddle.net/6L0armd4/
期望的结果是我从单个单元格开始数组,它只计算那些单元格。目前,它总是给出下一个纹理,即使我选择了不同的单元格。
解决方案
您需要制作侦听器事件,您可以在下面的代码中将颜色代码更改为您的图像路径,并避免任何本地路径图像链接问题尝试使用在线图像直接链接。
var table = document.querySelector('#table')
var selectedCells = table.getElementsByClassName('selected')
table.addEventListener('click', function(e) {
var td = e.target
if (td.tagName !== 'TD') {
return
}
if (selectedCells.length) {
selectedCells[0].className = ''
}
td.className = 'selected'
})
table {
cursor: text;
}
tr {
background-color:white;
}
td {
font-size: 14;
cursor: default;
}
td.selected {
background-color: red;
// replace this with background image tag like this
background-image: url("paper.gif
<table border="1" cellpadding="8" cellspacing="2" id="table">
<tr>
<td>Cell one</td>
<td>Cell Tw</td>
<td>Cell three</td>
<td>Cell Four</td>
<td>Cell five</td>
<td>Cell sex</td>
<td>Cell five</td>
<td>cell seven</td>
<td>cell eight</td>
<td>cell nine</td>
<td>cell tens</td>
<td>cell eleven</td>
<td>cell twelve</td>
</tr>
<tr>
<td>AKo</td>
<td>KK</td>
<td>KQs</td>
<td>KJs</td>
<td>KTs</td>
<td>K9s</td>
<td>K8S</td>
<td>K7s</td>
<td>K6s</td>
<td>K5s</td>
<td>K4s</td>
<td>K3s</td>
<td>K2s</td>
推荐阅读
- amazon-dynamodb - DynamoDB 用于不断发展的应用程序
- javascript - Jquery 可排序和可拖动的辅助函数在具有多个元素时更改单个元素的元素 onclick
- java - Java Geolocation 计算 - 没有得到正确的值
- python - SymbolicTransformer 生成的新特征不符合规则?
- python - 使用 selenium 单击多个链接
- jquery - 如何将事件绑定到jQuery中的所有输入字段
- go - 在未导出的字段上调用导出的方法
- mysql - 寻找有关如何使用随机 PII 数据生成数据库的指导
- c# - 我想下载我在用户系统上使用 XmlWriter.Create() 创建的 C# 中的 XML 文件
- sql - Rstudio 错误:输入“”不匹配。期待: