Javascript 使用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>

2015-09-18 00:25:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 17:00:00 
2015-09-20 20:05:00 
2015-09-20 20:05:00 
2015-09-20 20:25:00 
2015-09-21 00:30:00 
2015-09-22 00:30:00 

在jquery中，我使用以下内容来获取整个表，因为它不断变化。在另一个页面上，我解析每个表字段中表单输入的值

$("<input>", { name: "table", value: $("#table").html() }).appendTo(form);

$（“”，{name:“table”，value:$（“#table”）.html（）}）；

问题是当我以这种方式解析时，它只解析原始表单输入值。用户可以更改该值，但仍将采用原始值。现在我在单表单输入值上使用.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();
});

$（文档）.ready（函数（）{
$（#nfl.deleteLink”）。在（“单击”，函数（）上{
var tr=$（this.nexist（'tr'）；
tr.css（“背景色”，“#FF3700”）；
tr.fadeOut（400，函数（）{
tr.remove（）；
});
返回false；
});
$（'.c-box'）.change（函数（）{
var td=$（this）.closest（'td'）；
var total=$（this.sibbines（“：text”）；
如果（$（this）.prop（“选中”））{
$（this.attr（'checked'，true）；
$（this.attr（'value'，1）；
总衰减切换（“缓慢”、“线性”）；
}否则{
总衰减切换（“缓慢”、“线性”）；
$（this.attr（'value'，0）；
}
返回false；
});
$（“#刷新按钮”）。单击（函数（）{
location.reload（）；
});
var tableData=$（'tr[data key]'）.map（函数（）{
var$row=$（this），key=$row.data（'key'），
values=$row.find（':input'）.map（函数（）{
返回此.value；
}).get（）；
返回{
钥匙：钥匙，
价值观：价值观
};        
}).get（）；
$（“#下载”）。在（'click'，函数（e）{
e、 预防默认值（）；
var csrfToken=$（'meta[name=“csrf-token”]”）。attr（“内容”）；
var form=$（“”，{action:“print”，method:“POST”，target:“\u blank”}）；
$（“”，{name:“logo”，value:$（“#logo”）.html（）}）；
$（“”，{name:“header”，value:$（“#header”）.html（）}）；
$（“”，{name:“title”，value:$（“#title”）.val（）}）；
$（“”，{name:“table”，value:$（“#table”）.html（）}）；
$（“”，{name:“rules”，value:$（“#rules”）.html（）}）；
$（“”，{name:“payone”，value:$（“#payone”）.val（）}）；
$（“”，{name:“paytoo”，value:$（“#paytoo”）.val（）}）；
$（“”，{name:“paytree”，value:$（“#paytree”）.val（）}）；
$（“”，{name:“payfour”，value:$（“#payfour”）.val（）}）；
$（“”，{name:“payfive”，value:$（“#payfive”）.val（）}）；
$（“”，{name:“paysix”，value:$（“#paysix”）.val（）}）；
$（“”，{name:“payseven”，value:$（“#payseven”）.val（）}）；
$（“”，{name:“payeight”，value:$（“#payeight”）.val（）}）；
$（“”，{name:“bayone”，value:$（“#bayone”）.val（）}）；
$（“”，{name:“baytower”，value:$（“#baytower”）.val（）}）；
$（“”，{name:“baytree”，value:$（“#baytree”）.val（）}）；
$（“”，{name:“bayfour”，value:$（“#bayfour”）.val（）}）；
$（“”，{name:“bayfive”，value:$（“#bayfive”）.val（）}）；
$（“”，{name:“baysix”，value:$（“#baysix”）.val（）}）；
$（“”，{name:“bayseven”，value:$（“#bayseven”）.val（）}）；
$（“”，{name:“bayeight”，value:$（“#bayeight”）.val（）}）；
$（“”，{name:“csrf”，value:csrfToken}）；
表单提交（）；
});

---

}))

以下内容将每行映射到一个对象数组，如下所示：

[
 {
   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

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

---

以下内容将把每一行映射到一个对象数组，该数组如下所示：

[
 {
   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$行。一定是在做与我的演示不同的事情……您在演示中看到开发工具控制台中的日志了吗？是的，我看到了日志，它很好。但这是我剧本中的一个问题。我不太擅长javascript，但我认为您可以用var声明一个变量，而不是$Im获取未定义的变量：rowfrom什么？我的代码中没有

行

变量，我看不到您在使用什么。它指的是代码第二行的var$行。一定是在做与我的演示不同的事情……您在演示中看到开发工具控制台中的日志了吗？是的，我看到了日志，它很好。但这是我剧本中的一个问题。我不太擅长javascript，但我认为你用var声明一个变量不是很好$