使用jquery在动态表中获取表单值
Getting form values in dynamic table using jquery
我想获得表格中的输入表单值,以便在jquery中使用以在另一个页面上进行解析。由于表是动态的,我需要能够在飞行中进行调整。下面是一个表格示例:
<table class="table table-striped table-bordered"><thead>
</thead>
<tbody>
<tr data-key="49"><td><input type="text" class="pull-right form-control" name="" value="Kansas City Chiefs" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Denver Broncos"></td><td><input type="text" class="form-control" name="" value="3" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="41" maxlength="3" style="width:60px"></td><td>2015-09-18 00:25:00 <input type="text" class="form-control" name="" value="2015-09-18 00:25:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="50"><td><input type="text" class="pull-right form-control" name="" value="Carolina Panthers" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Houston Texans"></td><td><input type="text" class="form-control" name="" value="3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="40" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="51"><td><input type="text" class="pull-right form-control" name="" value="New Orleans Saints" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-10" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Tampa Bay Buccaneers"></td><td><input type="text" class="form-control" name="" value="10" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="47" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="52"><td><input type="text" class="pull-right form-control" name="" value="Pittsburgh Steelers" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="San Francisco 49ers"></td><td><input type="text" class="form-control" name="" value="6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="45" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="53"><td><input type="text" class="pull-right form-control" name="" value="Minnesota Vikings" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Detroit Lions"></td><td><input type="text" class="form-control" name="" value="3" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="43" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="54"><td><input type="text" class="pull-right form-control" name="" value="Buffalo Bills" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="1" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="New England Patriots"></td><td><input type="text" class="form-control" name="" value="-1" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="45" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="55"><td><input type="text" class="pull-right form-control" name="" value="Chicago Bears" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="2" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Arizona Cardinals"></td><td><input type="text" class="form-control" name="" value="-2" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="45" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="56"><td><input type="text" class="pull-right form-control" name="" value="Cleveland Browns" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="1" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Tennessee Titans"></td><td><input type="text" class="form-control" name="" value="-1" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="41" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="57"><td><input type="text" class="pull-right form-control" name="" value="Cincinnati Bengals" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="San Diego Chargers"></td><td><input type="text" class="form-control" name="" value="3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="46" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="58"><td><input type="text" class="pull-right form-control" name="" value="Washington Redskins" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="St. Louis Rams"></td><td><input type="text" class="form-control" name="" value="-3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="41" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="59"><td><input type="text" class="pull-right form-control" name="" value="New York Giants" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-2.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Atlanta Falcons"></td><td><input type="text" class="form-control" name="" value="2.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="51" maxlength="3" style="width:60px"></td><td>2015-09-20 17:00:00 <input type="text" class="form-control" name="" value="2015-09-20 17:00:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="60"><td><input type="text" class="pull-right form-control" name="" value="Oakland Raiders" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Baltimore Ravens"></td><td><input type="text" class="form-control" name="" value="-6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="43" maxlength="3" style="width:60px"></td><td>2015-09-20 20:05:00 <input type="text" class="form-control" name="" value="2015-09-20 20:05:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="61"><td><input type="text" class="pull-right form-control" name="" value="Jacksonville Jaguars" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Miami Dolphins"></td><td><input type="text" class="form-control" name="" value="-6" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="41" maxlength="3" style="width:60px"></td><td>2015-09-20 20:05:00 <input type="text" class="form-control" name="" value="2015-09-20 20:05:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="62"><td><input type="text" class="pull-right form-control" name="" value="Philadelphia Eagles" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Dallas Cowboys"></td><td><input type="text" class="form-control" name="" value="5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="55" maxlength="3" style="width:60px"></td><td>2015-09-20 20:25:00 <input type="text" class="form-control" name="" value="2015-09-20 20:25:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="63"><td><input type="text" class="pull-right form-control" name="" value="Green Bay Packers" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="Seattle Seahawks"></td><td><input type="text" class="form-control" name="" value="3.5" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="49" maxlength="3" style="width:60px"></td><td>2015-09-21 00:30:00 <input type="text" class="form-control" name="" value="2015-09-21 00:30:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
<tr data-key="64"><td><input type="text" class="pull-right form-control" name="" value="Indianapolis Colts" style="text-align:right"></td><td><input type="text" class="form-control" name="" value="-7" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="New York Jets"></td><td><input type="text" class="form-control" name="" value="7" maxlength="3" style="width:60px"></td><td><input type="text" class="form-control" name="" value="47" maxlength="3" style="width:60px"></td><td>2015-09-22 00:30:00 <input type="text" class="form-control" name="" value="2015-09-22 00:30:00" maxlength="3" style="display:none"></td><td><a class="deleteLink" href=""><span class="glyphicon glyphicon-trash"></span></a></td></tr>
</tbody></table>
我使用下面的jquery来抓取整个表,因为它不断变化。在另一个页面上,我解析每个表字段中表单输入的值。
$("<input>", { name: "table", value: $("#table").html() }).appendTo(form);
问题是,当我以这种方式解析时,它只解析原始表单输入值。用户可以更改该值,但它仍将采用原始值。现在我做了一些实验,使用。val()对单一表单输入值,而不是使用。html(),我可以得到所需的响应。但是这些表单输入是动态生成的。我怎样才能有效地做到这一点
整个javascript
$(document).ready(function() {
$("#nfl .deleteLink").on("click",function() {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(400, function(){
tr.remove();
});
return false;
});
$('.c-box').change(function () {
var td = $(this).closest('td');
var total = $(this).siblings(":text");
if($(this).prop("checked")) {
$(this).attr('checked', true);
$(this).attr('value', 1);
total.fadeToggle("slow", "linear" );
} else {
total.fadeToggle("slow", "linear" );
$(this).attr('value', 0);
}
return false;
});
$('#refreshButton').click(function() {
location.reload();
});
var tableData = $('tr[data-key]').map(function(){
var $row= $(this), key = $row.data('key'),
values= $row.find(':input').map(function(){
return this.value;
}).get();
return {
key : key,
values : values
};
}).get();
$('#download').on('click', function(e) {
e.preventDefault();
var csrfToken = $('meta[name="csrf-token"]').attr("content");
var form = $("<form>", { action: "print", method: "POST", target: "_blank" });
$("<input>", { name: "logo", value: $("#logo").html() }).appendTo(form);
$("<input>", { name: "header", value: $("#header").html() }).appendTo(form);
$("<input>", { name: "title", value: $("#title").val() }).appendTo(form);
$("<input>", { name: "table", value: $("#table").html() }).appendTo(form);
$("<input>", { name: "rules", value: $("#rules").html() }).appendTo(form);
$("<input>", { name: "payone", value: $("#payone").val() }).appendTo(form);
$("<input>", { name: "paytwo", value: $("#paytwo").val() }).appendTo(form);
$("<input>", { name: "paythree", value: $("#paythree").val() }).appendTo(form);
$("<input>", { name: "payfour", value: $("#payfour").val() }).appendTo(form);
$("<input>", { name: "payfive", value: $("#payfive").val() }).appendTo(form);
$("<input>", { name: "paysix", value: $("#paysix").val() }).appendTo(form);
$("<input>", { name: "payseven", value: $("#payseven").val() }).appendTo(form);
$("<input>", { name: "payeight", value: $("#payeight").val() }).appendTo(form);
$("<input>", { name: "bayone", value: $("#bayone").val() }).appendTo(form);
$("<input>", { name: "baytwo", value: $("#baytwo").val() }).appendTo(form);
$("<input>", { name: "baythree", value: $("#baythree").val() }).appendTo(form);
$("<input>", { name: "bayfour", value: $("#bayfour").val() }).appendTo(form);
$("<input>", { name: "bayfive", value: $("#bayfive").val() }).appendTo(form);
$("<input>", { name: "baysix", value: $("#baysix").val() }).appendTo(form);
$("<input>", { name: "bayseven", value: $("#bayseven").val() }).appendTo(form);
$("<input>", { name: "bayeight", value: $("#bayeight").val() }).appendTo(form);
$("<input>", { name: "csrf", value: csrfToken }).appendTo(form);
form.submit();
});
});
下面将每一行映射到一个对象数组,如下所示:
[
{
key: 56, // value of "data-key"
values: ["Kansas City Chiefs", "-3", "Denver Broncos", "3", "41", "2015-09-18 00:25:00"]
},
.......// other row objects
]
JS
var tableData = $('tr[data-key]').map(function(){
var $row= $(this), key = $row.data('key'),
values= $row.find(':input').map(function(){
return this.value;
}).get();
return {
key : key,
values : values
};
}).get();
迭代这个数组可以很容易地在另一个页面上复制table
演示相关文章:
- 如何从pdftron webviewer获取表单数据
- 在不同的文件中使用Javascript获取表单数据
- 试图获取表单时出现Jquery错误
- (extjs)获取表单中单选按钮的选定值.不返回该值
- jQuery发布并获取表单数据
- 可以't使用jquery获取表单中select字段的值
- 使用JavaScript或Prototype获取表单中的所有控件并启用它们
- 单击表单的“提交”按钮时,获取表单中的所有INPUT和ACTION标记
- 如何从Angular Payments获取表单数据
- 无法获取表单's面板的x和y坐标,并在加载时从cookie中设置它们
- 有没有一种方法可以在jQuery.serialize()之前获取表单数据,或者与jQuery.sserialize(()
- 通过单击提交按钮获取表单名称
- 使用 Ajax 获取表单数据
- 铬扩展 :如何获取表单并填写并提交
- 如何从 django 模板语言获取表单数据
- 根据选择选项元素将表单重定向到不同的URL,并在电子邮件中获取表单详细信息
- 通过javascript提示获取表单的信息
- 从包含ng的字段中获取表单数据,而无需使用ng模型
- 使用Javascript获取表单值
- 获取表单帖子外部的单选按钮值