在 AJAX 成功时动态生成表行

Posted 2023-03-05

【中文标题】在 AJAX 成功时动态生成表行

【英文标题】：Generate table row dynamically on AJAX success

【发布时间】：2012-06-29 20:22:21

【问题描述】：

我想做的是：当用户点击发送时，我希望数据显示在<tr/> 中（每个字段都嵌套在自己的<td/> 中）。

我已经写了一个实际执行此操作的脚本，但系统还不是动态的。

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：

$(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;
    );
)

如您所见，我使用dataString[x] 手动抓取字段，但是如何使这个系统动态？

我正在考虑使用如下循环，但我似乎无法使其工作：

for(var i = 0; i < n; i++)
    row += "$('<td>').append("+dataString[i]+")";


$('#results').append(
    $('<tr>')
        .append(row)
);

关于如何做到这一点的任何提示？或者您有更清洁的解决方案吗？

【问题讨论】：

当你真正点击提交按钮时，表单被提交并且页面被刷新。您可以将输入类型更改为按钮并使用您现有的 JS 代码。

@vimalnath 不，它没有；绑定到事件处理程序的函数末尾的return false; 可以防止这种情况发生。

【参考方案1】：

这行代码：

row += "$('<td>').append("+dataString[i]+")";

不是创建一个元素并向其附加数据，它只是连接row 变量和一个字符串文字（包含 jQuery 代码）。

为什么不将 row 设为 实际 行 - 而不是包含行内容的字符串 - 然后将其附加到 success 回调处理程序中：

var row = $('<tr>');
for(var i = 0; i < n; i++) 
    row.append($('<td>').html(dataString[i]));

然后：

$('#results').append(row);

【讨论】：

我知道这个问题，但不知道如何解决它。太好了，非常感谢。

我在想，如果我想在同一页面上有多个表单（具有不同数量的字段）怎么办？有没有比简单地用不同的ids 复制它更好的方法来实现这个脚本？

【参考方案2】：

var row = '<tr>';
var col = '';
for(var i=0;i<dataString.length;i++)
    col += '<td>'+dataString[i]+'</td>';
row += '</tr>';
$('#results').append(row);

【参考方案3】：

试试这个，一定会成功的。

var str ='<tr>';
$.each(dataString, function(i)
    str += '<td>' + this + '<td>';

$('#results').append(str + '</tr>');