Question

我有一张带有指令的表格。当我对表进行排序时，我的指令被触发，这给了我一个名为$elem的属性。

此属性包含table DOM元素。有没有办法迭代这个对象并读取每个<td>行的所有<tr> innerHTML？

例如，在此示例中：http://plnkr.co/edit/eodM0kMxZukG8y9DIh00?p=preview

如何才能获取所有TD值或每行并仅使用AngularJS将其存储在JS数组中？结果如下：

var arr = {['1', 'User 1', '<a href="#">link 1</a>'],
           ['2', 'User 2', '<a href="#">link 2</a>']};

Answer 1

这是您收集此信息的方法：

 var rows = $elem[0].tBodies[0].rows,
     cells,
     result = [];

 for (var i = 0; i < rows.length; i++) {
     cells = rows[i].cells;
     result.push([]);
     for (var j = 0; j < cells.length; j++) {
         result[i].push(angular.element(cells[j]).html());
     }
 }

演示：http://plnkr.co/edit/ZMOurGJccz6sjFME2EUr?p=preview

Answer 2

在这种情况下，$elem只是一个jQuery（或jqLite）对象。请参阅上面@Yoshi发布的链接。遍历它以获取子节点不是一个有角度的问题，实际上只是一个jQuery问题。你可能会尝试类似的东西：

$elem.find('td').each(function(index) {
    $(this).... // do something with $(this)
});

Answer 3

$elem参数只是一个jqLite对象。最后，这使得这是一个jQuery问题。我想指出，这是从AngularJs的方式有点倒退。通常，您应该从模型中的其他位置生成数据表。这样你就不必从DOM中读取数据。

但是，这是生成所需输出的一种方法：

var row, rows;
var item, data = [];

// find all of the table rows that are below $elem
rows = $elem.find('tr');

for(var i = 0; i < rows.length; i++) {
    item = [];

    // get a jqLite reference to this row
    row = $elem.find(rows[i]);

    // get all of its child cells, and iterate over each element
    row.find('td').each(function(i, e) {
        // push the element's inner html in to our item array
        item.push(e.innerHTML);
    });

    // only add the item if it has data
    if (item.length) {
        data.push(item);
    }
}

Answer 4

好吧，我真的很讨厌自己这样说（笑），因为这种类型的问题几乎总是导致使用错误的模式在AngularJS中做一些更复杂的事情。但是，因为它确实被问到很多，所以这完全有效：

http://plnkr.co/edit/XnT5tGjeDUVGHJ3pzFpc?p=preview

var entries = [];
angular.forEach($elem.children()[1].children, function(tr) {
  var entry = [];
  angular.forEach(tr.children, function(td) {
    entry.push(td.innerHTML);
  });

  entries.push(entry);
});
console.log(entries);

关于这一点，没有什么真正的Angular-ish。 $ elem只是围绕表格的HTML元素的轻量级包装器。它是HTML5，因此有一个<thead>元素后跟一个<tbody>，其中第一个forEach跟在链后面以获取<tr> - <thead>的子元素。内在的

Answer 5

使用以下查询获取所有td。

     link: function($scope, $elem) {
  var arr = ($($elem[0]).find('tbody tr'));
  var coll = [];
  for(var i=0; i < arr.length; i++){
    var tr = arr[i];
    var tdColl = $(tr).find('td');
    var obj = [];
    for(var y = 0; y < tdColl.length; y++ ){

      obj.push(tdColl[y].innerText);
    }
    coll.push(obj)
  }
 console.log(coll);
}

然后，您可以循环并获取所有对象数组

Plunkr：http://plnkr.co/edit/Z5XNp4q4F7sbN5SvjCll?p=preview

从AngularJS $元素获取表TD值

5 个答案:

演示：http://plnkr.co/edit/ZMOurGJccz6sjFME2EUr?p=preview