将变量分配给单个表格单元格

Question

我正在尝试将图像放入表格中。我有这个工作，如果你点击，你会在可用的选项中循环。但是，计数器与单元格无关，它是一个全局计数器。有没有办法创建一个局部变量来跟踪单个单元格在数组中的位置？

我曾尝试为一个单元格创建一个局部变量，但它不起作用。

下面是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/

期望的结果是我从单个单元格开始阵列，它只对这些单元格计数。目前，它总是提供下一个纹理，即使我选择了不同的单元格。

Answer 1

您需要制作侦听器事件，您可以在下面的代码中将颜色代码更改为您的图像路径，并避免任何本地路径图像链接问题尝试使用在线图像直接链接。var table = document.querySelector('#table')var selectedCells = table.getElementsByClassName('selected')table.addEventListener('click', function(e) {var td = e.targetif (td.tagName !== 'TD') {return}if (selectedCells.length) {selectedCells[0].className = ''&nbsp; &nbsp;&nbsp;}td.className = 'selected'})table {&nbsp;cursor: text;}tr {background-color:white;}td {font-size: 14;cursor: default;}td.selected {background-color: red;&nbsp;// replace this with background image tag like this&nbsp;&nbsp;&nbsp;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>