Question

我有一个html表格，可以在旋转木马上显示我网站上显示的图像。图像具有显示它们的位置，并在表格中显示。该表的一个特性是它使用了jQuery .sortable（）函数。如果图像移动到表格的顶部，则该图像的位置将更改为0，并且后续位置会更改。这一切都很好，我能够捕获变量中的位置。但是，我现在需要做的是jQuery POST表中的数据，因此我可以使用新位置更新数据库中的字段以及任何其他已更新的信息。

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

如果它在哪里我想象它会看起来像这样。

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/

Answer 2

可以说JavaScript中没有关联数组。在JavaScript数组中是一维的，您可以根据数组中的索引检索项目。你在谈论对象或对象文字。我在下面为你编写了一个示例和示例结构。

var saveObj = {}; //Setup a blank object for the data;

$("#banners tbody tr").each(function () {

   var id = $('td:first', $(this)).text();

   saveObj[id] = {
        name : $('td:nth(1)', $(this)).text(),
        pos : $('td:nth(2)', $(this)).text(),
        url : $('td:nth(3)', $(this)).text(),
        loc : $('td:nth(5)', $(this)).text()
    };
});

这将首先设置一个名为saveObj的空白对象文字。这是你的空白画布可以这么说。然后在你的循环中你正常抓住id。这将是您在对象中的键，键的值将是我们在循环中动态创建的另一个对象文字。使用与变量（name，pos，url，loc）相同的键及其数据值，就像现在抓取它们一样。你的结构将是这样的

var saveObj = {
    "12" : {
       name : "YourName",
       pos : "YourPos",
       url : "YourUrl",
       loc : "YourLoc"
    },
    "16" : {
       name : "YourName2",
       pos : "YourPos2",
       url : "YourUrl2",
       loc : "YourLoc2"
    }
};

HTML表数据到javascript数组

2 个答案: