JavaScript 将数据从文本字段的动态表中读取到数组中答案

【问题标题】：JavaScript reading data into an array from a dynamic table of textfieldsJavaScript 将数据从文本字段的动态表中读取到数组中
【发布时间】：2014-04-22 06:04:48
【问题描述】：

我正在使用 HTML 表格和附加到按钮点击的 JavaScript 函数动态创建表格。我现在想使用另一个名为完成的按钮获取数据并将其存储到多维数组中（如果可能的话）。我什至无法开始使用最后一种将其保存到数组中的方法。我不知道如何检索文本数据。

这是我当前的 HTML 代码。

<head>
    <title>TableTest</title>
    <script src="/javascript/func.js"></script>
</head>
<body>
      <form>
         <div id="Input">
                        <INPUT class="form-button" id="AddRow" type="button" value="Add Row" onclick="addRow('dataTable')" />
                        <INPUT class="form-button" id="DeleteRow" type="button" value="Delete Row(s)" onclick="deleteRow('dataTable')" />
                        <INPUT class="form-button" id="Finished" type="button" value="Finished" onclick="gatherData('dataTable')" />
                    <table id="dataTable" border="1" style="width:200px" id="mytable" align="center" cellspacing="3" cellpadding="4">       
                        <th>Select</th>
                        <th>Text1</th>
                        <th>Text2</th> 
                        <th>Text3</th>
                            <tr>
                            <td><INPUT type="checkbox" name="chk"/></td>
                            <td><INPUT type="text" name="text1"/></td>
                            <td><INPUT type="text" name="txt2"/></td>
                            <td><INPUT type="text" name="txt3"/></td>
                            </tr>
                    </table>    
            </div>
       </form>
</body>

这是我的 JavaScript 文件：

 function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
            }
        }
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 2) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
        }catch(e) {
            alert(e);
        }
    }

function gatherData(){ 


 //Tests
        var table = document.getElementById('dataTable');
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;

        alert(rowCount);
        alert(row);
        alert(colCount); 
}

【问题讨论】：

要收集数据，您不想插入新行，只需迭代那里的行（如在 deleteRow 函数中），然后为每个单元格，收集适当的值（比如 textConent 或 innerText，或者如果选中则表单控件值等）。

标签： javascript html arrays dynamic html-table

【解决方案1】：

我尽量保持简单，也可以说 jQuery 干净。

    var data = [];
    function gatherData() {
         var table = document.getElementById('dataTable');
         for (r = 1; r < table.rows.length; r++) {

             var row = table.rows[r];
             var cells = row.cells;

             for (c = 0; c < cells.length; c++) {
                 var cell = cells[c];
                 var inputElem = cell.children[0];
                 var isInput = inputElem instanceof HTMLInputElement;
                 if (!isInput)
                     return;

                 var value = inputElem.value;

                 var isCheckbox = inputElem.getAttribute('type') == 'checkbox';
                 if (isCheckbox)
                     value = inputElem.checked;

                 var rowData = {};
                 rowData.inputType = inputElem.getAttribute('type');
                 rowData.inputValue = value;
                 data.push(rowData);
             }
         }
     }

     function startExec() {
         gatherData();
         for (i = 0; i < data.length; i++) {
             console.log(data[i].inputType);
             console.log(data[i].inputValue);
         }
     }
     //just wait for the dom to load, and then execute the function for testing
     document.addEventListener("DOMContentLoaded", startExec, false);

第二次修订

 function getData() {

     var table = document.getElementById('dataTable');
     if (table === null)
         return;

     if (table.rows[0].cells.length <= 1)
         return;

     var data = [];
     for (l = 0; l < table.rows[0].cells.length; l++) {
         data.push({
             items: [],
             name: "ColumnNumber" + l
         });
     }

     for (i = 1; i < table.rows.length; i++) {
         var cells = table.rows[i].cells;
         for (c = 0; c < cells.length; c++) {
             var inputElem = cells[c].children[0];
             data[c].items.push({
                 inputType: inputElem.getAttribute('type'),
                 inputValue: inputElem.value
             });
         }
     }
     printData(data);
 }

 function printData(data) {
     for (i = 0; i < data.length; i++) {
         for (k = 0; k < data[i].items.length; k++) {
             console.log(data[i].items[k].inputValue);
         }
     }
 }

 document.addEventListener("DOMContentLoaded", getData(), false);

很高兴您开始自己进行表格操作，我建议您继续这样做，如果您想进入更大的代码库，我建议您查看jTable's。即使它是一个 jQuery 插件，您仍然可以通过查看代码结构来学习一些东西，这些代码结构用于处理围绕根据数据集构建表和添加记录等的所有逻辑。

【讨论】：

感谢您的帮助，我一直在计划看jTable，但我想先对此有更好的了解。我还有一个问题要问你。如果复选框被选中，我使用复选框只是为了删除行，我不想将数据存储在其中。我怎么能传递这些值？也可以将数据存储到单独的数组中吗？例如 tex1Column[]、text2Column[]、text3Column[] 或 allData[text1Column][text2Column][text3Column]。再次感谢您的帮助。
所以您想将一列的所有文本存储在一个数组中，假设您有三行，这些值在单元格中，1 2 3, 1 2 3, 1 2 3 . 那么你想要数组 text1column[1,1,1] 和 text2column[2,2,2] 等等？
好的，添加了另一个修订版，根据您的要求，最好添加一个 case 语句来处理每种类型的输入标签。

【解决方案2】：

这是你要找的吗？

JSFIDDLE

$(document).ready(function(){
    $('#Finished').click(function(){
        var my_arr=[];

        $('td').each(function(){

            if ($(this).children().is(':checkbox') )
            {
                if($(this).children().prop('checked'))
                {                                      
                    my_arr.push($(this).children().val());
                }               
            }else{           
                my_arr.push($(this).children().val());
            }
        })
        console.log(my_arr);
    })


})

【讨论】：

对不起，这是 JQuery 版本！

【解决方案3】：

我修改了 TameBadger 的答案，以按行而不是按列构建数组。我还添加了一个检查，以查看给定单元格在引用之前是否具有值。就我而言，并非所有单元格都有值。

 var table = document.getElementById('mainTable');

 if (table === null)
     return;

 if (table.rows[0].cells.length <= 1)
     return;

 var tblData = [];

 //Put a RowNumber name and values placeholder for the number of rows we have.
 for (r = 0; r < table.rows.length; r++) 
 {
     //Debug
     //console.log(" row: ", r);     

     tblData.push({
         name: "RowNumber" + r,
         items: []
     });

     //Get the cells for this row.
     var cells = table.rows[r].cells;

     //Loop through each column for this row and push the value...
     for (c = 0; c < cells.length; c++) 
     {
         var inputElem = cells[c].children[0];
         var tmpInputElem;

         if (inputElem == null)
         {
            tmpInputElem = "";
         }
         else
         {
            tmpInputElem = inputElem.value           
         }

         //Debug
         //console.log(" row-cel: ", r, "-", c, " ", inputElem);

         tblData[r].items.push(
         {
             //Comment out the type for now...
             //inputType: inputElem.getAttribute('type'),
             inputValue: tmpInputElem
         });
     }
 }

 //Debug
 //printData(tblData);

【讨论】：