如何使用jQuery读取动态html表行
How to read dynamic html table rows using jQuery
function AddRow() {
$('#myDynamicTable tr:last').after('<tr><td class="itemName"><input type="text" style="width: 300px;"/><td class="itemQty"><input type="text" style="width: 50px;"/></td></td> </tr>');
$("#myDynamicTable").show();
}
单击按钮时,我正在调用上述函数,该函数将一行添加到 html 表中。该表具有手动填写的列 itemName 和 itemQty。
当我完成添加任意数量的行及其列值后,在另一个按钮单击时,我想读取表中行的值并将它们保存到数据库中。
最好确保行中的itemName和itemQty都有值,itemQty必须是数字。
var arrItems = [];
$('#myDynamicTable').find('tr').each(function () {
var row = $(this);
var item = new GatePassItemsViewModel("", "", $.trim(row.find(".itemName").html()), $.trim(row.find(".itemQty").html()));
arrItems.push(item);
});
我已经尝试了上面的代码,但$.trim(row.find(".itemName").html())
和$.trim(row.find(".itemQty").html())
都返回一个空字符串。
有人知道如何将表行成功读取到arrItems
变量中吗?
下表是 html
<table id="myDynamicTable" class="displaynone">
<tbody>
<tr>
<th style='width:220px;'><b>Item</b></th>
<th style='width:15px;'><b>Quantity</b></th>
</tr>
</tbody>
</table>
我不知道为什么您的.html()
调用什么也没返回,但我可以看到您遇到问题的几个原因。
主要问题是row.find(".itemName").html()
将/应该返回表格单元格包含的html,即 <input... />
,而您想要的是该输入元素的值。因此,对于这两种情况,请更改为row.find(".itemName input").val()
(即定位输入元素并读取其值(,您应该处于更好的状态。
要验证值,您可以简单地执行以下操作:
...
var row = $(this),
itemText = $.trim(row.find(".itemName input").val()),
qty= $.trim(row.find(".itemQty input").val());
if(itemText.length === 0 || !qty.match(/'d+/)) {
//Handle the problem of invalidity
}
这将测试修剪后,item
的长度是否大于零,并且qty
是整数(仅由一个或多个数字组成(。
其他问题/意见:
- 在
AddRow()
中,您的表格单元格以某种方式嵌套。您需要在打开第二个单元格之前关闭第一个单元格(并删除最后一个双</td>
( - 行
$.trim(row.find(".searchFirstName").html());
不会有任何影响,因为它只返回修剪后的值,而不会更改要修剪的变量或类似值。
相关文章:
- 如何查找一个单词在动态创建的html表行中出现的次数
- 如何使用jQuery读取动态html表行
- 如何移动/重新排序html表行
- 如何在更改一列时更新HTML表行中的单元格
- 当我处于 td 级别时,如何从 xsl html 表行中提取数据
- 交换 HTML 表行时更新行 ID
- 将不同的颜色应用于动态生成的 HTML 表行
- 从单击表单的 html 表行中预填充表单字段.(所有这些都应该发生在JSP上)
- 使用 jQuery 动态地自动递增 HTML 表行值
- 使用 jQuery 删除 HTML 表行
- 使用Javascript在MVC4 Razor中构建HTML表行
- 用js隐藏HTML表行<tr>从而不占用空间
- 如何将HTML表行拖放到另一个位置(在Jsp中)并将新位置(值)也保存在数据库(MySql)中
- CakePHP 2.0添加html表行
- 使用POST通过AJAX将HTML表行传递给PHP
- 根据其他行中的内容筛选HTML表行
- 将HTML输入文件中的文件添加到各个HTML表行中
- 使用Knockout.js将带有嵌套数组的JS对象扁平化为单个HTML表行
- 将HTML表行解析为带有键和值的多维数组
- 在HTML表行DOM元素中查找行索引