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

您似乎需要向数组中添加数据。 JavaScript不识别数据[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语法。这两个例子都值得一试。

Answer 2

您的代码中有很多错误。我试图用下面的代码中的注释来解决这些问题。

总是解决控制台中的错误。

//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>

在JavaScript中创建数组

2 个答案: