Question

我正在使用jQuery和django

我有jQuery生成的动态表格，其中包含email字段和password字段以及可删除该行的删除按钮：

    $("button#genBtn").click(function() {

        var t = $("input#inputEmail").val();
        var p = $("input#inputPassword").val();
        var delBtn = $('<button class=\"btn btn-danger\">delete</button>');
        var row = $("<tr><td>" + t + "</td><td>" + p + "</td><td></td></tr>");

        $('td:last', $(row)).append(delBtn);

        $(delBtn).bind("click", deleteNode);

        $("table tbody").append(row);

    });

这是表格：

<table class="table table-striped">
    <thead>
        <tr>
            <th>email</th>
            <th>password</th>
            <th>action</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

假设我想从此表中获取所有行的数据，并将其发布到服务器端。我怎么能这样做？

Answer 1

没有任何额外的库，如下所示：

（1）从表中获取数据

function getTableData()
{
    // Array of data we'll return
    var data = [];

    // Counter
    var i = 0;

    // Cycle through each of the table body's rows
    $('tbody tr').each(function(index, tr) {
        var tds = $(tr).find('td');
        // Check we've got two <td>s
        if (tds.length > 1) {
            // If we do, get their text content and add it to the data array
            data[i++] = {
                email: tds[0].textContent,
                password: tds[1].textContent
            }
        }
    });
    return data;
}

（2）将其发布到服务器

$.ajax({
    method: 'post',
    url: '', // Set the URL of whatever in Django will handle your post
    data: getTableData()
});

然而，如果我正在尝试此任务，我将通过使用Knockout来实现（1），这将允许在视图和视图模型之间（或者在模板和视图之间）更好地分离想想它们，作为Django用户）。很高兴您使用了一个体面的服务器端框架，最终会在客户端上使用意大利面条代码，这很可惜！

如何通过jQuery从动态生成的表中获取所有行的数据

1 个答案: