Question

我有一个HTML表，需要在其中获取表的所有行的值，每个表中都存在具有不同类的单元格。

第一个包含一个复选框，选中后必须返回true，否则返回false
第二个是内部文本本身
第三列需要从输入type = number中获取一个数字
第四个是来自文本框的文本
最后2个是日期，应为内部文本本身。

预期结果是

[
[false,"A text",12,"textboxvalueifpresent","2019-07-17T14:08:38.911Z","2019-07-04T12:00:00.000Z"],
[true,"B text",88,"","2019-07-17T14:08:38.913Z","2019-07-04T12:00:00.000Z"],
[false,"C text",24,"","2019-07-17T14:08:38.913Z","2019-07-04T12:00:00.000Z"]
]

我为每个Jquery尝试过

var items = [];
$("#tab1 tr").each(function() {
        items.push([$(this).find("input.checkbox").val(),
        $(this).find("input.material").val(),
        $(this).find("input.consign").val(),
        $(this).find("input.name").val(),
        $(this).find("input.dc").val(),
        $(this).find("input.do").val(),
        ]);
});

<table id="tab1" style="padding: 5px;width: 100%">
   <tr id="tr1">
      <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb1"></td>
      <td style="width:30%;"><span style="width:100%;" class="input material" id="ma1">A text</span></td>
      <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co1" value="12" placeholder="Consign"></td>
      <td style="width:30%;"><input style="width:90%;" class="input name" id="na1" value="" placeholder="Name"></td>
      <td style="width:15%;"><span class="input dr" id="dr1">2019-07-17T14:08:38.911Z</span></td>
      <td style="width:15%;"><span class="input do" id="do1">2019-07-04T12:00:00.000Z</span></td>
   </tr>
   <tr id="tr2">
      <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb2"></td>
      <td style="width:30%;"><span style="width:100%;" class="input material" id="ma2">B text</span></td>
      <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co2" value="88" placeholder="Consign"></td>
      <td style="width:30%;"><input style="width:90%;" class="input name" id="na2" value="" placeholder="Name"></td>
      <td style="width:15%;"><span class="input dr" id="dr2">2019-07-17T14:08:38.913Z</span></td>
      <td style="width:15%;"><span class="input do" id="do2">2019-07-04T12:00:00.000Z</span></td>
   </tr>
   <tr id="tr3">
      <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb3"></td>
      <td style="width:30%;"><span style="width:100%;" class="input material" id="ma3">C text</span></td>
      <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co3" value="24" placeholder="Consign"></td>
      <td style="width:30%;"><input style="width:90%;" class="input name" id="na3" value="" placeholder="Name"></td>
      <td style="width:15%;"><span class="input dr" id="dr3">2019-07-17T14:08:38.913Z</span></td>
      <td style="width:15%;"><span class="input do" id="do3">2019-07-04T12:00:00.000Z</span></td>
   </tr>
</table>

Answer 1

复选框的值是其value属性中的值，无论是否选中都无所谓。您可以使用.prop("checked")或.is(":checked")来判断是否已选中。

您的复选框没有class="checkbox", so。input.checkbox won't work. I changed it to。input：checkbox`。

将不会使用input选择器来选择跨度，而是使用.text()而不是.val()来获得文本。

第五列中没有class="dc"，是class="dr"。

$("#button").click(function() {
  var items = [];
  $("#tab1 tr").each(function() {
    items.push([
      $(this).find("input:checkbox").prop("checked"),
      $(this).find("span.material").text(),
      $(this).find("input.consign").val(),
      $(this).find("input.name").val(),
      $(this).find("span.dr").text(),
      $(this).find("span.do").text(),
    ]);
  });
  $("#output").text(JSON.stringify(items, null, 2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tab1" style="padding: 5px;width: 100%">
  <tr id="tr1">
    <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb1"></td>
    <td style="width:30%;"><span style="width:100%;" class="input material" id="ma1">A text</span></td>
    <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co1" value="12" placeholder="Consign"></td>
    <td style="width:30%;"><input style="width:90%;" class="input name" id="na1" value="" placeholder="Name"></td>
    <td style="width:15%;"><span class="input dr" id="dr1">2019-07-17T14:08:38.911Z</span></td>
    <td style="width:15%;"><span class="input do" id="do1">2019-07-04T12:00:00.000Z</span></td>
  </tr>
  <tr id="tr2">
    <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb2"></td>
    <td style="width:30%;"><span style="width:100%;" class="input material" id="ma2">B text</span></td>
    <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co2" value="88" placeholder="Consign"></td>
    <td style="width:30%;"><input style="width:90%;" class="input name" id="na2" value="" placeholder="Name"></td>
    <td style="width:15%;"><span class="input dr" id="dr2">2019-07-17T14:08:38.913Z</span></td>
    <td style="width:15%;"><span class="input do" id="do2">2019-07-04T12:00:00.000Z</span></td>
  </tr>
  <tr id="tr3">
    <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb3"></td>
    <td style="width:30%;"><span style="width:100%;" class="input material" id="ma3">C text</span></td>
    <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co3" value="24" placeholder="Consign"></td>
    <td style="width:30%;"><input style="width:90%;" class="input name" id="na3" value="" placeholder="Name"></td>
    <td style="width:15%;"><span class="input dr" id="dr3">2019-07-17T14:08:38.913Z</span></td>
    <td style="width:15%;"><span class="input do" id="do3">2019-07-04T12:00:00.000Z</span></td>
  </tr>
</table>
<button id="button">Show array</button>
<pre id="output"></pre>

Answer 2

您需要选中复选框的 checked属性，即通过 is（）方法进行检查。而且span没有val方法来获取价值。它是Html标记，因此您应该执行 .text（）或.html（）以获取标记文本或html。另外，如果每个控件上都有类，则应该直接通过类名查找。

我将checkbox类添加到了checkbox控件中并获得了checked属性。

var items = [];
$("#tab1 tr").each(function() {
        items.push([$(this).find(".checkbox").is(":checked"),
        $(this).find(".material").text(),
        $(this).find(".consign").val(),
        $(this).find(".name").val(),
        $(this).find(".dc").text(),
        $(this).find(".do").text(),
        ]);
});

<table id="tab1" style="padding: 5px;width: 100%">
   <tr id="tr1">
      <td class="input checkbox" style="width:5%;cursor:default"><input type="checkbox" id="cb1" class="checkbox"></td>
      <td style="width:30%;"><span style="width:100%;" class="input material" id="ma1">A text</span></td>
      <td style="width:10%;"><input type="number" style="width:90%;" class="input consign" id="co1" value="12" placeholder="Consign"></td>
      <td style="width:30%;"><input style="width:90%;" class="input name" id="na1" value="" placeholder="Name"></td>
      <td style="width:15%;"><span class="input dr" id="dr1">2019-07-17T14:08:38.911Z</span></td>
      <td style="width:15%;"><span class="input do" id="do1">2019-07-04T12:00:00.000Z</span></td>
   </tr>

</table>

我认为这应该可行。

使用jquery

2 个答案: