javascript - 使用 jquery 迭代表格单元格
问题描述
我有一个 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>
解决方案
复选框的值是它的value
属性中的任何内容,它是否被选中并不重要。您可以使用.prop("checked")
or.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>
推荐阅读
- android - 需要帮助 Kotlin 协程、架构组件和改造
- python - 使用 hash() 方法的哈希映射
- date - 开放日期策略变量
- python - 如何让 Firebase Python 脚本一直运行?
- javascript - 在匿名闭包函数中定义全局函数
- sql - 如何从 dacpac 文件中提取数据库模式?
- c# - 如何使球体能够对彼此造成伤害?
- prisma - 从数据库中删除所有表后,如何将 prisma 重新部署到数据库
- dll - 通过命令提示符使用 RUNDLL32 从 Mupen64Plus dll 调用命令
- javascript - Feathers-mongoose : 通过羽毛猫鼬中的自定义属性获取