通过遍历表行来创建对象数组

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

试试这个代码

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 2

此解决方案依赖于添加 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 3

我建议稍微更改您的 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();

这将在表上找到所有具有类用户 ID 的元素，只收集值，然后 .toArray() 得到一个基本的 javascript 数组。然后，您可以将其处理为您想要的任何 json 结构，或者您可以在该 map 函数中创建您的 json 对象。

Answer 4

检查控制台，你会得到一个包含所需对象的数组

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 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。希望对您有所帮助。