在 JavaScript 中创建一个数组

Question

我正在尝试创建一个数组，但数据返回为空，它似乎没有工作，任何帮助将不胜感激。我已经更新并添加了 html。感谢大家的耐心。

当我的结果产生时，我仍然得到 [object Array]: []。

 <table class="table table-bordered table-framed" id="seconDTable" style="display:block;" i>
                        <tbody id="secondtbody">

                                    <tr name="myRow">
                                        <td style="width: 100%;">
                                           <input type="text" name="ParentTitle" value="book1">
                                            <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
                                                @for (int i = 1; i < 10 + 1; i++)
                                                {
                                                    <option value="@i">
                                                        @i
                                                    </option>
                                                }
                                            </select>
                                        </td>
                                    </tr>
                                    <tr name="myRow">
                                        <td style="width: 100%;">
                                           <input type="text" name="ParentTitle" value="book2">
                                            <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
                                                @for (int i = 1; i < 10 + 1; i++)
                                                {
                                                    <option value="@i">
                                                        @i
                                                    </option>
                                                }
                                            </select>
                                        </td>
                                    </tr>                                                                                

                                    </tr>
                                }
                            }
                        </tbody>
                    </table>

var rows = document.getElementById("seconDTable").getElementsByTagName("myRow").length;
var data = [];
$("table tbody tr").each(function () {
    var textval = $(this).find("td").find("input[type=text][name=ParentTitle]").val();
    var ddlval = $(this).find("td").find("select option:selected").val();
    for (var i = 0; i < rows ; i++) {
               data.push{[
                    "Title": textval,
                    "PageNumber": ddlval
                ]};
    }
    console.log(data);
})

Answer 1

您的代码中存在相当多的问题。我试图在下面的代码中使用 cmets 来解决这些问题。

始终解决控制台中的错误。

//There is no tag "myRow", so the length attribute and therefor rows will be 0. 
//So your for loop won't run and nothing will be assigned to the array.
//var rows = document.getElementById("seconDTable").getElementsByTagName("myRow").length;
//the use of the "name" attribute here is unususal, maybe you meant to use a class
//Use querySelectorAll 
var rows = document.querySelectorAll("#seconDTable tr[name=myRow]").length;
var data = [];
$("table tbody tr").each(function() {
  var textval = $(this).find("td").find("input[type=text][name=ParentTitle]").val();
  var ddlval = $(this).find("td").find("select option:selected").val();
  for (var i = 0; i < rows; i++) {
    //Incorrect syntax for push
    //data.push{[
    data.push({
      "Title": textval,
      "PageNumber": ddlval
    });
  }
  console.log(data);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table class="table table-bordered table-framed" id="seconDTable" style="display:block;" i>
  <tbody id="secondtbody">

    <tr name="myRow">
      <td style="width: 100%;">
        <input type="text" name="ParentTitle" value="book1">
        <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
          <!-- Angualr?? @for (int i = 1; i < 10 + 1; i++)
                                                {
                                                    <option value="@i">
                                                        @i
                                                    </option>
                                                } -->
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <tr name="myRow">
      <td style="width: 100%;">
        <input type="text" name="ParentTitle" value="book2">
        <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <!-- What!!??
                                    </tr>
                                    
                                }
                            }-->
  </tbody>
</table>

您的下一个问题应该是，“为什么我在数组中有 4 个项目？”。基本上你在表格行上循环了两次。一旦进入 jquery each() 函数，然后进入你的 for 循环。只需在 each() 函数中执行此操作即可。你应该得到类似下面的结果：

var data = [];
$("table tbody tr").each(function() {
  var textval = $(this).find("td").find("input[type=text][name=ParentTitle]").val();
  var ddlval = $(this).find("td").find("select option:selected").val();

  data.push({
    "Title": textval,
    "PageNumber": ddlval
  });
});

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<table class="table table-bordered table-framed" id="seconDTable" style="display:block;" i>
  <tbody id="secondtbody">

    <tr class="myRow">
      <td style="width: 100%;">
        <input type="text" name="ParentTitle" value="book1">
        <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
          <!-- Angualr?? @for (int i = 1; i < 10 + 1; i++)
                                                {
                                                    <option value="@i">
                                                        @i
                                                    </option>
                                                } -->
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <tr class="myRow">
      <td style="width: 100%;">
        <input type="text" name="ParentTitle" value="book2">
        <select id="ddlPageCount" style=" width: 35px; padding - top: 1px; height: 20px; font - size: 14px;  color: #555555; vertical - align: left; background - color: #ffffff;1px solid #cccccc;border - radius: 1px; ">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </td>
    </tr>
    <!-- What!!??
                                    </tr>
                                    
                                }
                            }-->
  </tbody>
</table>

Answer 2

看起来您需要向数组中添加数据。 JavaScript 不会将 data[i]{} 识别为这样做的一种方式。您可以改用data.push() 函数：

var data = [];
$("table tbody tr").each(function () {
    var textval = $(this).find("td").find("input[type=text][name=ParentTitle]").val();
    var ddlval = $(this).find("td").find("select option:selected").val();

    data.push({
      "Title": textval,
      "PageNumber": ddlval
    })
})

查看函数的documentation，并详细阅读JavaScript 的array 语法。这两个都有很好的例子来看看。