html：動態添加圖像id

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 
}