[英]Iterating table cells using jquery
我有一个HTML表,需要在其中获取表所有行的值,每个表中都存在具有不同类的单元格。
第一个包含一个复选框,选中后必须返回true,否则返回false
第二个是内文本身
预期的结果是
[
[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>
复选框的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>
您需要检查复选框的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>
我认为这应该有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.