使用 javascript 区分 td答案

【问题标题】：Distinguish td's using javascript使用 javascript 区分 td
【发布时间】：2014-10-02 00:43:57
【问题描述】：

我正在我的代码中创建一个表格、两行和每行中的两个单元格。为此，我有以下代码：

var t = document.createElement('table');
document.body.appendChild(t);
for (var x = 0; x <= 1; x++) {
    var tr = document.createElement('tr');
    t.appendChild(tr);
    for (var y = 0; y <= 1; y++) {
        var td = document.createElement('td');
        tr.appendChild(td);
    }
}

现在，我需要在第一个单元格中创建一个文本节点，并在第二个单元格中创建一个a 元素。我该怎么做？

【问题讨论】：

if's，if's yes
你能举个例子吗？
我很难理解为什么这是一个如此艰巨的挑战，你需要把它放在 SO 上？或者我的知识太丰富了，我无法再解决这些问题了

标签： javascript html-table tablerow tablecell

【解决方案1】：

var t = document.createElement('table');
document.body.appendChild(t);
for (var x = 0; x <= 1; x++) {
    var tr = document.createElement('tr');
    t.appendChild(tr);
    for (var y = 0; y <= 1; y++) {

        var td = document.createElement('td');
        tr.appendChild(td);

        if(y == 0){
            alert("here");
            var a = document.createElement('A');
            td.appendChild(a);
            alert("here");
        }
        else{
            var div = document.createElement('div');
            td.appendChild(div);
            //Create text node
        }
    }
}

在你的循环中检查是否y == 0，如果是，那么你在你的第一个td，因此你创建一个链接。
如果y == 1 你在第二个td 因此你创建文本节点

用你想要的任何东西替换div。

【讨论】：

【解决方案2】：

另一种方法是在文本中定义表格。

例如：

var t = document.createElement('table');
t.innerHTML = "<tr><td>text</td><td><a href='#'>link</a></td></tr><tr><td>text</td><td><a href='#'>link</a></td></tr>";

【讨论】：

【解决方案3】：

在您的第二个循环中，只需检查 if (y == 0) 然后在 td 内创建文本，如果 (y == 1) 然后在 td 内创建一个 a。

【讨论】：

【解决方案4】：

实际上，做一个“两步”循环的代码比完整写出来要多：

var t = document.createElement('table'),
    trs = [document.createElement('tr'),document.createElement('tr')],
    tds = [
        [document.createElement('td'),document.createElement('td')],
        [document.createElement('td'),document.createElement('td')]
    ];
trs[0].appendChild(tds[0][0]);    trs[0].appendChild(tds[0][1]);
trs[1].appendChild(tds[1][0]);    trs[1].appendChild(tds[1][1]);
t.appendChild(trs[0]);            t.appendChild(trs[1]);
// now append more stuff here to the tds
document.body.appendChild(t); // do this last - it's better

【讨论】：

为什么这么复杂 D: