3

这可能需要一些解释，所以请多多包涵。

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

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

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

我遇到了这段代码：

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

我相信哪个（经过修改）可以让我为每个文本框动态创建一个唯一的名称。我遇到的问题是我如何访问这个新的文本框，因为我不知道它叫什么（在创建表之后）？

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

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

如何将数组中的该单元格（包含 8 个）与该新文本框相关联，然后在我提前不知道它的名称时检索并存储一个新值？

我的想法是，我该怎么写

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

到html？

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

4

4 回答 4

1

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

如果表格中有任意单元格，则可以像这样获取表格中该单元格的行号和列号，其中cell传递给此函数的对象可以是td对象，也可以是它的任何后代（例如<input>位于桌子）：

// Pass any td object or descendant of a td object in a <table> and it will return
// an object with {row: x, col: y}
// or return null if the cell passed wasn't inside a <tr> and <td>
function findRowColInTable(cell) {

    function findParent(obj, parentTagName) {
        parentTagName = parentTagName.toUpperCase();
        while (obj && obj.tagName != parentTagName) {
            obj = obj.parentNode;
        }
        return obj;
    }

    findChildCnt(obj) {
        var cnt = 0;
        while (obj = obj.prevSibling) {
            ++cnt;
        }
        return cnt;
    }

    var td, tr, col, row;

    // get table cell
    td = findParent(cell, "TD");
    if (td) {
        col = findChildCnt(td);
        tr = findParent(td, "TR");
        if (tr) {
            row = findChildCnt(tr);
            return {row: row, col: col};
        }
    }
    return null;
}

仅供参考，这在 jQuery 中要容易得多，您可以在其中使用.closest(tag)并.index()找到合适的父母并获取本地兄弟姐妹的数量，但我为您提供了纯 JavaScript 版本。

于 2013-10-27T02:04:49.317 回答
1

HTML：

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

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

请参阅jsfiddle。第三个空表将作为空table标签插入，但这不是必需的。

我想提一下，由于您需要将这些表连接到数据库，一个优雅的解决方案是使用客户端 MVC 框架，如Backbone.js。在这里你可以找到一本很好的介绍书。视图可以使用类似于上述render表格的代码。该tables数组可以存储在Collection中。

于 2013-10-27T02:28:50.423 回答
0

你实际上可以在表单上做数组。以我的旧答案为例，您可以使用这种命名方案在表单输入中创建数组。在后端，您将它们作为数组获取（假设是 PHP）。

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

于 2013-10-27T02:04:48.067 回答
0

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

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

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

这是可能的解决方案。对不起我的 jQuery 严重依赖。我只是不确定如何使用 document.createElement() 创建元素（我的坏知识），您当然可以使用纯 javascript 实现（没有 jQuery）来更改它们。

     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)

警报将显示一个 3D 数组，其中包含由表号、行号索引的所有单元格的值，当然还有精确指向单元格的列。单元格值的默认值为 ""

使用这种技术，您不需要为刚刚输入值的相应单元格查找正确的数组元素。相反，在 DOM 中创建元素之前附加事件侦听器。这是解决问题的面向对象的方式/方法。

当您每次用户进行输入时都需要找到相应的数组单元时，该解决方案不是具有 O(n^3) 算法复杂度，而是在对象初始化期间花费更多时间，但之后，它是 O(1)。

于 2013-10-27T02:26:58.617 回答