用包含输入字段和值的单元格附加表格的 Javascript 函数答案

【问题标题】：Javascript function to append table with cells containing input field and value用包含输入字段和值的单元格附加表格的 Javascript 函数
【发布时间】：2011-07-12 08:16:09
【问题描述】：

我创建了一个工作函数，它在表格中附加单元格/行，然后用数组中的数据填充这些单元格。现在的问题是我需要更改它，以便生成的单元格包含一个input 字段，其中value= 是数组数据。

这是我能找到的最接近的示例：http://jsfiddle.net/JEAkX/3/

有一次我尝试更改为cell.innerHTML = "<input type='text' size='1'>"+ subset[i++] +"</input>"，但它只是将数据放在输入文本区域之外。

subset[i++] 创建了正确的输出，但我似乎无法在字段值中得到它。

这是之前我为输入字段编辑它的函数：

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var i = 0;
    for (var r = 0; r < 4; r++) {
        var row = tbody.insertRow(r);
        for (var c = 0; c < 4; c++) {
            var cell = row.insertCell(c);
            cell.appendChild(document.createTextNode(subset[i++]));
        }
    }
}

【问题讨论】：

这里的所有这些答案都有效，谢谢大家！给它@JeanK 作为第一。
+1 用于使用/介绍 jsfiddle（对于不熟悉它的人。例如我自己）

标签： javascript jquery html-table append

【解决方案1】：

而不是做：

cell.innerHTML = "<input type='text' size='1'>"+ subset[i++] +"</input>"

尝试这样做：

cell.innerHTML = "<input type='text' size='1' value='" + subset[i++] + "'/>"

使用输入的 value 属性，这样它应该可以工作。

【讨论】：

感谢您的快速回答！我想我试过一次，但一定是在某处搞砸了"，当它不起作用时没有仔细检查。

【解决方案2】：

你在正确的轨道上，你需要将文本添加到输入值中，例如：

cell.innerHTML = "<input type='text' size='1' value='" + subset[i++] + "' />";

您的子集需要填充一些值。

【讨论】：

【解决方案3】：

使用这个：

 value=''+subset[i++]

而不是

value='subset[i++]'

所以你的新函数应该是这样的：

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var i = 0;
    for (var r = 0; r < 4; r++) {
        var row = tbody.insertRow(r);
        for (var c = 0; c < 4; c++) {
            var cell = row.insertCell(c);
            cell.innerHTML = "<input type='text' size='1' value=''+subset[i++] />"
        }
    }
}

【讨论】：