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

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），这将使view和viewmodel之间（或模板和视图之间，您可能认为它们是Django用户）之间有更好的分离。 很好，因为您使用的是不错的服务器端框架，所以很遗憾在客户端上添加意大利面条代码！