使用jquery在动态表中获取表单值

Question

我想获取表中的输入表单值，以便在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();
});

}）;

Answer 1

以下会将每一行映射到一个看起来像的对象数组：

[
 {
   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();

迭代这个数组应该可以很容易地在另一个页面上重现表

的 DEMO