Question

我正在尝试在html上的表中动态添加图像ID，以便它对应于它在表和行中保存的位置，例如行A，第1列。

到目前为止，我有;

<table id= "hub" style="align:center">
    <tr>
     <td ColSpan="7">A </td>
     <td><img src="images/here.gif" title="A1"</td>
     <td><img src="images/here.gif" title="A2"</td>
     <td><img src="images/here.gif" title="A3"</td>
     <td><img src="images/here.gif" title="A4"</td>
     <td><img src="images/here.gif" title="A5"</td>
     <td><img src="images/here.gif" title="A6"</td>
    </tr>
    <tr>
     <td ColSpan="7">B </td>
     <td><img src="images/here.gif" title="B1" </td>
     <td><img src="images/here.gif" title="B2" </td>
     <td><img src="images/here.gif" title="B3" </td>
     <td><img src="images/here.gif" title="B4" </td>
     <td><img src="images/here.gif" title="B5" </td>
     <td><img src="images/here.gif" title="B6" </td>
</tr>

等等。我想要一个for循环将需要考虑到表的名称，但因为我相当新的HTML和JavaScript我不知道如何实现它。我知道我可以手工输入id，但我更喜欢动态地使用它。谢谢你的时间。

Answer 1

您可以使用此代码：

var images = document.getElementsByTagName('img');

for(var cpt = 0; cpt < images.length; cpt++){
    var node = images[cpt];

    var parentNode = node.parentNode
    var prevNode = parentNode

    var position = 0;


    while(prevNode.previousElementSibling){
        prevNode = prevNode.previousElementSibling;
        position++;
    }

    node.id = prevNode.innerHTML.replace(/^\s+|\s+$/g, '') + position
}

小提琴：http://jsfiddle.net/R7uzy/

实际上，如果您的图片具有title属性，您可以这样做：

var images = document.getElementsByTagName('img');

for(var cpt = 0; cpt < images.length; cpt++){
    var node = images[cpt];

    node.id = node.title
}

html：动态添加图片ID

1 个答案: