在JavaScript函数中为td分配ID

Question

我已经将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)

我收到一条错误消息。

关于如何正确执行此操作的任何建议？

Answer 1

你可以这样-

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);
.....

Answer 2

正如我之前几乎每个人都注意到的那样：“不要使用document.write”。 在大多数情况下，它被认为是不好的技术。 如果仍然要使用它，请制作一个大字符串，然后仅使用document.write一次。 它将提高性能。 像这样：

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'变量在我看来是全局的。