javascript - HTML 表格数据到 JavaScript 数组

Question

我有一个 html 表格，用于显示在我的网站上以轮播方式显示的图像。图像具有显示的位置，如表中所示。 该表的特点之一是它使用 jQuery .sortable() 函数。如果将图像移至表格顶部，则该图像的位置将更改为 0，并且后续位置也会更改。 这一切工作正常，我能够捕获变量中的位置。 但是，我现在需要做的是 jQuery POST 表中的数据，这样我就可以使用新位置更新数据库中的字段以及已更新的任何其他信息。

理想情况下，我需要能够发布一个以图像 ID 作为键的 JavaScript 关联数组，然后是子数组中的图像信息，例如位置和位置。

如果它在 php 我想它会看起来像这样。

Array
(
    [45] => Array
        (
            [name] => Image 45
            [location] => img/Banner-45.jpg
            [url] => http://www.exampleurl2.com
            [position] => 0
        )

    [56] => Array
        (
            [name] => Image 56
            [location] => img/Image-56.jpg
            [url] => http://www.exampleurl2.com
            [position] => 1
        )

)

我可以循环遍历并更新表中的值。 到目前为止，我在 javascript/jquery 中创建具有这种类似格式的数组的所有尝试都失败了。

我有一个循环，它捕获 jQuery 中的详细信息

 $("#banners tbody tr").each(function () {
        var id = $('td:first', $(this)).text();
        var name = $('td:nth(1)', $(this)).text();
        var pos = $('td:nth(2)', $(this)).text();
        var url = $('td:nth(3)', $(this)).text();
        var loc = $('td:nth(5)', $(this)).text();


});

我知道这不是从表中捕获数据的最有效方法，但我对 jQuery 比较陌生。 现在我需要将它们插入某种形式的关联数组中，并将 ID 作为循环中的键。 任何正确方向或更有效方法的指针将不胜感激。

Answer 1

您可以使用jquery map遍历所有<tr>的函数从表中取出并创建行数据，然后遍历所有<td>位于当前 <tr> 内对于列数据:

var data = [];
var headers = [];
var tb = $('table.table');
var thead = tb.find('thead');
var tbody = tb.find('tbody');
thead.find('th').map(function(i,el){
   var $el = $(el);
   headers.push($el.attr('class'));
});
tbody.find('tr').map(function(i,el){
    var $el = $(el);
    var row = {};
    $el.find('td').map(function(i,el){
       var col = $(el).text();
       row[headers[i]] = col;
    });
    data.push(row);
});

示例 jsfiddle :http://jsfiddle.net/v6ZLj/1/