Javascript 以动态方式访问动态创建的变量

这可能需要解释一下，所以请耐心听我说

我试图创建X个表，每个表的长度（列）Y不同，每个表有4行，X和Y由用户决定。这部分我已经解决了

问题是每个表中的每个单元格都必须包含自己的文本框，该文本框将包含从数据库派生的数字。如果用户更改文本框中的数字，则更改必须反映在数据库中

由于表的数量和长度未知，我无法提前设置文本框的名称，必须动态设置

我遇到了以下代码：

var pageNumber = 1;
eval("var text" + pageNumber + "=123;");
alert(text1);
//alert shows '123'

通过修改，我相信这将允许我为每个文本框动态创建一个唯一的名称。我遇到的问题是，既然我不知道这个新文本框的名称（在创建表之后），那么如何访问它

我计划使用一个3d数组来保存我希望在表中每个单元格中显示的数字，并计划使用此数组来命名单元格

例如，数组可以是数组[i][j][k]，假设i=1，j=2，k=3，其中包含数字8。 动态创建的文本框名称类似于： 文本框123

如何将数组中的单元格（包含8个）与新文本框相关联，然后在事先不知道其名称的情况下检索并存储新值

按照我的想法，我怎么写这样的东西

 <input type="text" name="textBox123" value=array[i][j][k]> 

到html

---

再说一次，也许我想得太多了，还有更好的方法。如果是这样，请告诉我。

您实际上可以在表单上创建数组。例如，您可以使用这种命名方案在表单输入中创建数组。在后端，可以将它们作为数组（假设为PHP）

---

如果您是通过JS获取值，则可以将其作为基础，这将利用命名方案，获取表单值并将其转换为JS对象和数组，类似于PHP在后端接收它们的方式。基本上，它遍历表单并获取表单值。部分是jQuery，但如果不想合并整个库，可以从jQuery获取源代码。

您不必使用索引预先标记表中的每个单元格，因为您可以根据需要根据DOM层次结构进行计算

如果表中有任意单元格，则可以在表中获得该单元格的行号和列号，如下所示，其中传递给此函数的

cell

可以是

td

对象或其任何后代（例如表中的

标记）：

//在中传递任何td对象或td对象的后代，它将返回
//具有{row:x，col:y}的对象
//或者，如果传递的单元格不在and中，则返回null
函数findRowColInTable（单元格）{
函数findParent（对象，父标记名）{
parentTagName=parentTagName.toUpperCase（）；
while（obj&&obj.tagName！=父标记名）{
obj=obj.parentNode；
}
返回obj；
}
findChildCnt（obj）{
var-cnt=0；
while（obj=obj.previsibling）{
++碳纳米管；
}
返回cnt；
}
var td、tr、col、row；
//获取表格单元格
td=findParent（单元格，“td”）；
如果（td）{
col=findChildCnt（td）；
tr=融资方（td，“tr”）；
如果（tr）{
行=findChildCnt（tr）；
返回{row:row，col:col}；
}
}
返回null；
}

---

仅供参考，在jQuery中，这要简单得多，您可以使用

.closest（tag）

和

.index（）

找到合适的父项并获得本地兄弟姐妹数，但我提供了一个纯javascript版本。

您可以使用javascript面向对象的概念

每个表都有相应的表对象，其行和单元格也有相应的表对象。 使用此技术，每个对象在真实DOM中都有其“元素”

诀窍是，将事件监听器（例如，当用户在文本框中键入内容时）附加到对象，这样该事件监听器将只对应于该特定单元格，而不会与其他列、行和表中的其他单元格混淆

这是可能的解决办法。对不起，我的jQuery依赖性很强。我只是不知道如何用document.createElement（）创建元素（我的知识不好），当然可以用纯javascript实现（没有jQuery）来更改它们

values=newarray（）；
函数单元（id，值\行）{//单元类
这个.id=id；
this.element=$（“”）；
this.textbox=$（“”）；
值\u行[id]=“”//启动默认值==“”
//这里是诀窍
this.textbox.change（function（）{//如果不喜欢jQuery，可以使用onchange
值_row[id]=$（this.val（）；
//当用户更改文本框的值（键入）时，需要执行其他任务
});
this.textbox.appendTo（this.element）；
}
函数行（id、列数、值表）{//行类
this.id=id
this.element=$（“”）
values_table[id]=new Array（）；//使数组“values”变成3D
对于（var col=0；colHTML:



JavaScript:

var tables = [
        // Table #1
        [
            [111, 112, 113], // Row #1
            [121, 122, 123]  // Row #2
        ],
        // Table #2
        [
            [211, 212, 213, 214], // Row #1
            [221, 222, 223, 224], // Row #2
            [231, 232, 233, 234]  // Row #3
        ],
        // Table #3 (empty!)
        []
    ],
    nr, nc, i, j, k,
    name, value, textBox, cell, row, table,
    $tables = $("#tables");

for (i = 0; i < tables.length; ++i) {
    nr = tables[i].length;
    nc = nr > 0 ? tables[i][0].length : 0;
    table = "<table>";
    for (j = 0; j < nr; ++j) {
        row = "<tr>";
        for (k = 0; k < nc; ++k) {
            name = "textBox" + (i + 1) + (j + 1) + (k + 1);
            value = tables[i][j][k];
            textBox = "<input type='text' name='" + name + "' value='" + value + "'>";
            cell = "<td>" + textBox + "</td>";
            row += cell;
        }
        row += "</tr>\n";
        table += row;
    }
    table += "</table>\n";
    $tables.append(table);
}

var表=[
//表1
[
[111112113]，//第1行
[121122123]//第2行
],
//表2
[
[211212 213 214]，//第1行
[221222223224]，//第2行
[231232 233234]//第3行
],
//表3（空！）
[]
],
nr，nc，i，j，k，
名称、值、文本框、单元格、行、表、，
$tables=$（“#tables”）；
对于（i=0；i0？表[i][0]。长度：0；
表=”；
对于（j=0；j     values=new Array();
     function Cell(id,values_row){ //Cell class
        this.id=id;
        this.element=$("<td></td>");           
        this.textbox=$("<input type='text' name='"+this.id+"' id='"+this.id+"'></input>");
        values_row[id]="" //initiate default value == ""
            //here is the trick
        this.textbox.change(function(){ //you can use onchange if you dont like jQuery
            values_row[id]=$(this).val();             
            //other tasks need to be done when user changes the value of a textbox (typing)
        });
        this.textbox.appendTo(this.element);    
    }
    function Row(id,number_of_columns,values_table){ //Row class
        this.id=id
        this.element=$("<tr></tr>")                
        values_table[id]=new Array(); //make array "values" becomes 3D              
        for(var col =0;col<number_of_columns;col++){
            var the_cell=new Cell(col,values_table[col]);
            the_cell.element.appendTo(this.element);
        }
    }
    function Table(id,number_of_columns){ //Table class
        this.id=id
        this.element=$("<table></table>")
        values[id]=new Array();  //make array "values" becomes 2D                     
        for(var row=0;row<4;row++){
            var the_row=new Row(row,number_of_columns,values[id]);
            the_row.element.appendTo(this.element)                       
        }
    }
    // creating the tables
    for(var t=0;t<number_of_tables_needed;t++){
        the_table=new Table(t,number_of_column_for_this_table);
        the_table.element.appendTo(table_container_element);
    }
    //do input some text into some cells then
    alert(values)

<div id="tables"></div>

var tables = [
        // Table #1
        [
            [111, 112, 113], // Row #1
            [121, 122, 123]  // Row #2
        ],
        // Table #2
        [
            [211, 212, 213, 214], // Row #1
            [221, 222, 223, 224], // Row #2
            [231, 232, 233, 234]  // Row #3
        ],
        // Table #3 (empty!)
        []
    ],
    nr, nc, i, j, k,
    name, value, textBox, cell, row, table,
    $tables = $("#tables");

for (i = 0; i < tables.length; ++i) {
    nr = tables[i].length;
    nc = nr > 0 ? tables[i][0].length : 0;
    table = "<table>";
    for (j = 0; j < nr; ++j) {
        row = "<tr>";
        for (k = 0; k < nc; ++k) {
            name = "textBox" + (i + 1) + (j + 1) + (k + 1);
            value = tables[i][j][k];
            textBox = "<input type='text' name='" + name + "' value='" + value + "'>";
            cell = "<td>" + textBox + "</td>";
            row += cell;
        }
        row += "</tr>\n";
        table += row;
    }
    table += "</table>\n";
    $tables.append(table);
}