JavaScript迭代通過單元格子元素

我正在嘗試遍歷javascript中的html表格，並更新td標籤中列表項的id。我目前在訪問這些元素時遇到了麻煩。我需要訪問的標籤是;JavaScript迭代通過單元格子元素

<td> 
    <li id='1'>Curly</li> 
    <br /> 
    <li id='2'>Larry</li> 
    <br /> 
    <li id='3'>Moe</li> 
</td>

我目前的JavaScript是低於哪個讓我到單元格。任何人都可以建議如何訪問李的ID嗎？

var table = document.getElementById("tbl_calendar"); 

for (var i = 0, row; row = table.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 

    } 
}

來源

2015-12-02 Jasper

好奇你爲什麼有一個jQuery標籤，但你沒有在問題中使用它。 – 2015-12-02 16:52:25

您可以在下面使用querySelectorAll的例子選擇此小區內的所有li秒。此外，它的無效HTML無li s沒有包裝在ul或ol。

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/

JS：

var table = document.getElementById("tbl_calendar"); 

for (var i = 0, row; row = table.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 
    var li = col.querySelectorAll('li'); 
    for (var index = 0; index < li.length; index++) { 
     alert(li[index].id + ': ' + li[index].textContent); 
    } 
    } 
}

HTML：

<table id="tbl_calendar"> 
    <tr> 
    <td> 
     <ul> 
     <li id='1'>Curly</li> 
     <br /> 
     <li id='2'>Larry</li> 
     <br /> 
     <li id='3'>Moe</li> 
     </ul> 
    </td> 
    </tr> 
</table>

您還標記的jQuery所以在盡最大努力做到充分解釋。

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/1/

變種表=的document.getElementById（「tbl_calendar」）;

for (var i = 0, row; row = table.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 
    var li = $(col).find('li'); 
    for (var index = 0; index < li.length; index++) { 
      alert($(li[index]).attr('id') + ': ' + $(li[index]).text()); 
    } 
    } 
}

而且正如評論中所提到的那樣，您不需要所有這些循環。如果你只是想從一個表中的所有li是你可以這樣做：

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/2/

var table = document.getElementById("tbl_calendar"); 

var li, lis = table.querySelectorAll('tr td li'); 
for (var index = 0; index < lis.length; index++) { 
    li = lis[index]; 
    alert(li.id + ': ' + li.textContent); 
}

來源

2015-12-02 16:37:27 AtheistP3ace

我的頭腦裏混雜着各種標記。刪除我的答案和+1給你。如果使用'.querySelectorAll（）'，您可能想要顯示OP如何在單循環中使用'.table.querySelectorAll（「tr> td> li」）'。 – 2015-12-02 16:42:50

謝謝！用你的建議更新答案。 =] – AtheistP3ace

你可以考慮使用jQuery像這樣

$(document).ready(function(){ 
     $("td > li").each(function() { 
      $(this).attr("id","foo"); 
     }); 
    });

來源

2015-12-02 16:51:45 Raider

AtheistP3ace已經發佈一個很好的答案但我在這裏是新來的，想試着回答我自己，所以這裏是我做的一個小提琴，不知道它是你想要的，我用jquery，因爲我在你的標籤中看到它：JSFiddle

$("td").each(function() { 
    $(this).find('li').each(function() { 
     console.log($(this).attr("id")); 
    }); 
});

來源

2015-12-02 17:03:43

JavaScript迭代通過單元格子元素

回答

相關問題