jQuery 在 AJAX 成功时动态生成表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11242536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generate table row dynamically on AJAX success
提问by morgi
What I'd like to do is this : when the user clicks on send, I want the data to be displayed in a <tr/>(with each field nested in its own <td/>).
我想要做的是：当用户点击发送时，我希望数据显示在 a <tr/>（每个字段都嵌套在它自己的 中<td/>）。
I already wrote a script that actually does this, but the system is not dynamic yet.
我已经写了一个实际执行此操作的脚本，但系统还不是动态的。
HTML :
HTML :
<form name="contact" method="post" action="">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</p>
<p>
<label for="age">Age</label>
<input type="text" name="age" id="age" />
</p>
<p>
<label for="mail">Mail</label>
<input type="text" name="mail" id="mail" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Send" />
</p>
</form>
<table id="results"></table>
JS :
JS：
$(function() {
$("#submit").click(function() {
var name = $("input#name").val();
var age = $("input#age").val();
var mail = $("input#mail").val();
var dataString = [name, age, mail];
var n = dataString.length;
$.ajax({
type: "POST",
url: "process.php",
data: dataString,
success: function() {
$('#results').append(
$('<tr>')
.append($('<td>').append(dataString[0]))
.append($('<td>').append(dataString[1]))
.append($('<td>').append(dataString[2]))
);
}
});
return false;
});
})
As you can see, I grab the fields manually with dataString[x], but how can I make this system dynamic?
如您所见，我使用 手动抓取字段dataString[x]，但如何使该系统动态化？
I was thinking of using a loop like the following but I can't seem to make it work :
我正在考虑使用如下循环，但我似乎无法让它工作：
for(var i = 0; i < n; i++){
row += "$('<td>').append("+dataString[i]+")";
}
$('#results').append(
$('<tr>')
.append(row)
);
Any hint on how to do this? Or would you have a cleaner solution?
有关如何执行此操作的任何提示？或者你有更清洁的解决方案吗？
回答by Anthony Grist
This line of code:
这行代码：
row += "$('<td>').append("+dataString[i]+")";
isn't creating an element and appending data to it, it's just concatenating the rowvariable and a string literal (that contains jQuery code).
不是创建元素并向其附加数据，它只是连接row变量和字符串文字（包含 jQuery 代码）。
Why not make rowan actualrow - rather than a string that contains the contents of a row - then append that in the successcallback handler instead:
为什么不创建row一个实际的行——而不是一个包含行内容的字符串——然后将其附加到success回调处理程序中：
var row = $('<tr>');
for(var i = 0; i < n; i++) {
row.append($('<td>').html(dataString[i]));
}
Then:
然后：
$('#results').append(row);
回答by Taha Rehman Siddiqui
var row = '<tr>';
var col = '';
for(var i=0;i<dataString.length;i++)
col += '<td>'+dataString[i]+'</td>';
row += '</tr>';
$('#results').append(row);
回答by Aatif Farooq
Try this one, it will definitely work.
试试这个，它肯定会奏效。
var str ='<tr>';
$.each(dataString, function(i){
str += '<td>' + this + '<td>';
}
$('#results').append(str + '</tr>');
