使用jQuery迭代表單元格

Question

我有一個HTML表，需要在其中獲取表所有行的值，每個表中都存在具有不同類的單元格。

• 第一個包含一個復選框，選中后必須返回true，否則返回false

• 第二個是內文本身

• 第三列需要從輸入type = number中獲取一個數字
• 第四是來自文本框的文本
• 最后兩個是日期，應為內部文本本身。

預期的結果是

[
[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是其value屬性中的value ，無論是否選中都無所謂。 您可以使用.prop("checked")或.is(":checked")來告訴它是否已選中。

您的復選框沒有class="checkbox", so .input.checkbox won't work. I changed it to 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。 另外，如果每個控件上都有類，則應該直接通過類名查找。

我將復選框類添加到復選框控件，並獲得了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>

我認為這應該有效。