Question

我有一个HTML表格，我想迭代它的行并创建一个集合，或者说一个“对象数组”。

例如：

<table id="tbPermission">
  <tr>
    <th>User ID</th>
    <th>User Name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Test1</td>
  </tr>
</table>

我想创建一个集合，如下所示：

var trArray = [];
$('#tbPermission tr').each(function () {
    var tdArray = [];
    $(this).find('td').each(function () {

        // I want to create the array of objects here …
        tdArray.push();
    });

    // Final array
    trArray.push(tdArray);
});

数组可能如下所示：

tdArray : {'UserID' : '1', 'UserName' : 'Test1'};

和

trArray : [
    {'UserID' : '1', 'UserName' : 'Test1'},
    {'UserID' : '2', 'UserName' : 'Test2'}
]

Answer 1

我建议稍微更改你的HTML。

<table id="tbPermission">
    <tr>
        <th>User ID</th>
        <th>User Name</th>
    </tr>
    <tr>
        <td class="userid">1</td>
        <td class="username">Test1</td>
    </tr>
</table>

然后在你的javascript中想要将所有元素作为数组获取。

var userIdArray = $('#tbPermission .userid').map(function(userid){ return $(userid).html(); }).toArray();

这将在表上找到具有类userid的所有元素，仅收集值，并获得导致获得基本javascript数组的.toArray（）。然后你可以把它拿到你想要的任何json结构中，或者你可以在map函数中创建你的json对象。

Answer 2

试试此代码

var trArray = [];
$('#tbPermission tr').each(function () {
    var tr =$(this).text();  //get current tr's text
    var tdArray = [];
    $(this).find('td').each(function () {
        var td = $(this).text();  //get current td's text
        var items = {}; //create an empty object
        items[tr] = td; // add elements to object 
        tdArray.push(items); //push the object to array
    });    
});

在这里，我刚刚创建了一个空对象，用tr和td引用填充对象，将该对象添加到最终数组中。

添加工作jsfiddle

Answer 3

检查控制台，您将获得包含所需对象的数组

var arr = [];
$('#tbPermission tr:not(.header)').each(function() {
  var that = $(this);
  var id = that.find('td').eq(0).text();
  var name = that.find('td').eq(1).text();
  var obj = { 'userId': id , 'userName': name  };
  arr.push(obj);
});
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tbPermission">
  <tr class="header">
    <th>User ID</th>
    <th>User Name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Test1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Test2</td>
  </tr>
</table>

Answer 4

此解决方案依赖于添加thead和tbody元素，这是一个好主意，因为它向浏览器表明该表实际上是一个“数据”表而不是表示。

jQuery具有.map()功能。 map是一个基本函数，您可以在其中获取数组，然后使用回调函数的返回值替换值 - 这将生成一个新数组。

$([1,4,9]).map(function(){ return Math.sqrt(this) });
// [1, 2, 3]

.toArray将数组转换为jQuery对象，我们将其转换为“真正的数组”。

jQuery(function(){
  
  var $table = $("#tbPermission");
  
  var headers = $table.find('thead th').map(function(){
    return $(this).text().replace(' ', '');
  });
  
  var rows = $table.find('tbody tr').map(function(){
    var result = {};
    var values = $(this).find('>td').map(function(){
      return $(this).text();
    });
    // use the headers for keys and td values for values
    for (var i = 0; i < headers.length; i++) {
      result[headers[i]] = values[i];
    }
    
    // If you are using Underscore/Lodash you could replace this with
    // return _.object(headers, values);

    return result;
  }).toArray();

  
  // just for demo purposes
  $('#test').text(JSON.stringify(rows));
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbPermission">
  <thead>
    <tr>
      <th>User ID</th>
      <th>User Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Test1</td>
    </tr>
  </tbody>
</table>

<textarea id="test"></textarea>

如果由于某种原因无法更改HTML，您可以使用行索引来区分标题和数据行：

  var headers = $table.find('tr:eq(0) th').map(function(){
    return $(this).text().replace(' ', '');
  });

  var rows = $table.find('tr:gt(0)').map(function(){
    // ...
  });

Answer 5

基于给定的结构，这有点棘手。您可能需要稍微修改HTML以将单元格映射到标题，如下所示。

var myArray = [];
  
$("#tbPermission").find("td").each(function() {
    var $this = $(this), obj = {};
    obj[$this.data("column")] = $this.text();
    myArray.push(obj);
});

alert ( JSON.stringify(myArray) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbPermission">
    <tr>
        <th>User ID</th>
        <th>User Name</th>
    </tr>
    <tr>
        <td data-column="User ID">1</td>
        <td data-column="User Name">Test1</td>
    </tr>
</table>

请在一段时间内了解Array.push()和Objects in Javascript。希望有所帮助。

通过迭代表行

5 个答案: