在JavaScript函数中为td指定ID

Assigning an ID to a td within a JavaScript function

本文关键字：td 指定 ID JavaScript 函数      更新时间：2023-09-26

我已经将一个xml文件转换为一个HTML表。我使用的函数在这里:

document.write("<table><tr><td>ALPHA</td><td>BRAVO</td><td>CHARLIE</td><td>DELTA</td><td>
ECHO</td><td>FOXTROT</td><td>GOLF</td><td>HOTEL</td></tr>");
var x = xmlDoc.getElementsByTagName("List");
for (i = 0; i < x.length; i++)
{
document.write("<tr><td>");
document.write(i) //populates the ALPHA column
document.write("</td><td>");
document.write(x[i].getElementsByTagName("BRAVOITEMS")[0].childNodes[0].nodeValue);
document.write("</td><td>")
document.write(x[i].getElementsByTagName("CHARLIEITEMS")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("DELTAITEMS")[0].childNodes[0].nodeValue);
document.write("</td><td></td><td>");
document.write(x[i].getElementsByTagName("FOXTROTITEMS")[0].childNodes[0].nodeValue);
document.write("</td><td></td><td></td></tr>");
}
 document.write("</table>")

该表显示了我想要的内容，我计划稍后添加ECHOITEMS、GOLFITEMS和HOTELITEMS。

我的问题是，为了进一步进行，我需要为上面的每个td分配id，这样我就可以从表中提取数据。我能够分配一个ID到一个正常的HTML td，但我在上面的JavaScript代码中挣扎。我需要为每个td添加一个ID，该ID由一个短字符串后跟I号组成。例如，使用上面的前几行代码:

var x = xmlDoc.getElementsByTagName("List");
for (i = 0; i < x.length; i++)
{
document.write("<tr id='tdalpha'+ i><td>");
document.write(i)
document.write("</td><td id='tdbravo' + i>");
document.write(x[i].getElementsByTagName("BRAVOITEMS")[0].childNodes[0].nodeValue);

等。显然语法是不正确的，当我尝试:

var test = document.getElementById('tdalpha24')
document.write(test)

我得到一个错误信息。

关于如何正确地做这件事有什么建议吗?

你可以这样做-

for (i = 0; i < x.length; i++)
{
document.write('<tr id="tdalpha'+i'"><td>');
document.write(i)
document.write('</td><td id="tdbravo'+i+'">');
document.write(x[i].getElementsByTagName("BRAVOITEMS")[0].childNodes[0].nodeValue);
.....

在我之前几乎所有人都注意到:"不要使用document.write"。在大多数情况下，它被认为是糟糕的技术。如果你还想用它，创建一个大字符串并使用document。只写一次。它将提高性能。就像这样:

var str = '<table><tr><td>ALPHA</td><td>BRAVO</td><td>CHARLIE</td><td>DELTA</td><td>ECHO</td><td>FOXTROT</td><td>GOLF</td><td>HOTEL</td></tr>';
for (var i = 0; i < x.length; i++) {
    str += '<tr id="tdalpha'+i'"><td>';
    str += i;
    str += '</td><td id="tdbravo'+i+'">';
    str += x[i].getElementsByTagName("BRAVOITEMS")[0].childNodes[0].nodeValue);
    str += '</td><td>';
    str += x[i].getElementsByTagName("CHARLIEITEMS")   [0].childNodes[0].nodeValue;
    str += '</td><td>';
    str += x[i].getElementsByTagName("DELTAITEMS")[0].childNodes[0].nodeValue;
    str += '</td><td></td><td>';
    str += x[i].getElementsByTagName("FOXTROTITEMS")[0].childNodes[0].nodeValue;
    str += "</td><td></td><td></td></tr>";
}
str += '</table>';
document.write(str);

PS和你的'i'变量对我来说是全局的

相关文章：