如何获取动态表输入以放入数组？

Question

我已经将它用于输入，现在我认为这只是我没有注意到的愚蠢错误。

我的脚本如下所示：

<script type="text/javascript">
    $(document).ready(function () {

        $('#clicker').on('click', function (e) {
            var tableToObj = function (table) {
                var trs = table.rows,
    trl = trs.length,
    i = 0,
    j = 0,
    keys = [],
    obj, ret = [];




                for (; i < trl; i++) {
                    if (i == 0) {

                        for (; j < trs[i].children.length; j++) {

                            var sel = $(trs[i].children[j]).find("select");
                            if (sel.length == 0) {
                                keys.push(trs[i].children[j].innerHTML);
                            } else {
                                keys.push(sel.find('option:selected').val()); //all select works perfectly
                            }

                            var input = $(trs[i].children[j]).find("input"); //here I'm trying to find the input. This is where it stops working
                            if (input.length == 0) {
                                keys.push(trs[i].children[j].innerHTML);
                            } else {
                                keys.push(trs[i].childen[j].innerHTML);
                            }

                        }

                    } else {

                        obj = {};
                        for (j = 0; j < trs[i].children.length; j++) {  //this works
                            var sel = $(trs[i].children[j]).find("select");
                            if (sel.length == 0) {
                                obj[keys[j]] = trs[i].children[j].innerHTML;
                            } else {
                                obj[keys[j]] = sel.find('option:selected').val();
                            }

                            var input = trs.getElementsByTagName("input");  //below does not work
                            if (input.length == 0) {
                                obj[keys[j]] = trs[i].children[j].innerHTML;
                            } else {
                                obj[keys[j]] = input.find('text').val();
                            }



                            /* 
                            for (j < input.length; j++) {
                            data.push(input[j].id);
                            } 
                            */
                        }





                        ret.push(obj);
                    }

                }

                return ret;
            };

            document.getElementById('r').innerHTML = JSON.stringify(tableToObj(document.getElementById('myTable')));


        });


    });

这是不太相关的HTML ：（包括在内只是为了查看我从中提取的内容）

<table id="myTable">
   <thead>
      <tr>
         <th>​​​​​​​​​​​​​​​​​​FirstColumn</th>
         <th>SecondColumn</th>
         <th>ThirdColumn</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td> 
            <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option><option value="tr4">tr4</option></select></td>
         <td>1</td>
         <td> 
            <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
      </tr>
      <tr>
         <td></td>
         <td>
         </td>
         <td> 
            <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option><option value="tr4">tr4</option></select></td>
      </tr>
      <tr>
         <td><input type="text" /></td>
         <td><input type="text" />
         </td>
         <td> 
            <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
      </tr>
      <tr>
         <td>
         <input type="text" /></td>
         <td><input type="text" /></td>
         <td><input type="text" /></td>
      </tr>
      <tr>
         <td><input type="text" /></td>
         <td><input type="text" /></td>
         <td> 
            <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td>
      </tr>
   </tbody>
</table>​​  

编辑：自从trs [i]以来，它本来就是

Answer 1

您试图在元素数组上使用getElementByTagName ，因此应该在var input = trs[i].getElementsByTagName("input");使用index var input = trs[i].getElementsByTagName("input"); 相反，您正在执行var input = trs.getElementsByTagName("input");

旁注-请不要将javascript和jquery结合使用。 当您包含插件时，也请使用其功能。

  $(document).ready(function() { $('#clicker').on('click', function(e) { var tableToObj = function(table) { var trs = table.rows, trl = trs.length, i = 0, j = 0, keys = [], obj, ret = []; for (; i < trl; i++) { if (i == 0) { for (; j < trs[i].children.length; j++) { var sel = $(trs[i].children[j]).find("select"); if (sel.length == 0) { keys.push(trs[i].children[j].innerHTML); } else { keys.push(sel.find('option:selected').val()); //all select works perfectly } var input = $(trs[i].children[j]).find("input"); //here I'm trying to find the input. This is where it stops working if (input.length == 0) { keys.push(trs[i].children[j].innerHTML); } else { keys.push(trs[i].childen[j].innerHTML); } } } else { obj = {}; for (j = 0; j < trs[i].children.length; j++) { //this works var sel = $(trs[i].children[j]).find("select"); if (sel.length == 0) { obj[keys[j]] = trs[i].children[j].innerHTML; } else { obj[keys[j]] = sel.find('option:selected').val(); } var input = trs[i].getElementsByTagName("input"); //below does not work if (input.length == 0) { obj[keys[j]] = trs[i].children[j].innerHTML; } else { obj[keys[j]] = input.value; } } ret.push(obj); } } return ret; }; document.getElementById('r').innerHTML = JSON.stringify(tableToObj(document.getElementById('myTable'))); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <th>FirstColumn</th> <th>SecondColumn</th> <th>ThirdColumn</th> </tr> </thead> <tbody> <tr> <td> <select> <option value="tr1">tr1</option> <option value="tr2">tr2</option> <option value="tr3">tr3</option> <option value="tr4">tr4</option> </select> </td> <td>1</td> <td> <select> <option value="tr1">tr1</option> <option value="tr2">tr2</option> <option value="tr3">tr3</option> </select> </td> </tr> <tr> <td></td> <td> </td> <td> <select> <option value="tr1">tr1</option> <option value="tr2">tr2</option> <option value="tr3">tr3</option> <option value="tr4">tr4</option> </select> </td> </tr> <tr> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <select> <option value="tr1">tr1</option> <option value="tr2">tr2</option> <option value="tr3">tr3</option> </select> </td> </tr> <tr> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <input type="text" /> </td> </tr> <tr> <td> <input type="text" /> </td> <td> <input type="text" /> </td> <td> <select> <option value="tr1">tr1</option> <option value="tr2">tr2</option> <option value="tr3">tr3</option> </select> </td> </tr> </tbody> </table> <input type="button" id="clicker" value="click" /> <div id="r"> </div>