javascript 从 AngularJS $element 获取表 TD 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25268514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get table TD values from AngularJS $element
提问by Vivendi
I have a table with a directive on it. When I sort the table then my directive is triggered which gives me a property called $elem.
我有一张桌子，上面有一条指令。当我对表格进行排序时，我的指令被触发，它给了我一个名为$elem.
This property holds the tableDOM elment. Is there a way to iterate through this object and read all the <td>innerHTML of each <tr>row?
此属性包含tableDOM 元素。有没有办法遍历这个对象并读取<td>每一<tr>行的所有innerHTML ？
For example in this example: http://plnkr.co/edit/eodM0kMxZukG8y9DIh00?p=preview
例如在这个例子中：http: //plnkr.co/edit/eodM0kMxZukG8y9DIh00?p=preview
How can I get all the TD values or each row and store that in a JS array using AngularJS only? So the result is something like:
如何仅使用 AngularJS 获取所有 TD 值或每一行并将其存储在 JS 数组中？所以结果是这样的：
var arr = {['1', 'User 1', '<a href="#">link 1</a>'],
['2', 'User 2', '<a href="#">link 2</a>']};
回答by dfsq
This is how you can collection this information:
您可以通过以下方式收集此信息：
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());
}
}
Demo: http://plnkr.co/edit/ZMOurGJccz6sjFME2EUr?p=preview
演示：http: //plnkr.co/edit/ZMOurGJccz6sjFME2EUr?p=preview
回答by klyd
The $elemparameter is just a jqLite object. In the end that makes this a jQuery question. I would like to note that this is a bit backwards from the AngularJs way. Typically, you should be generating the table from data somewhere else in your model. In that way you would never have to read in the data from the DOM.
该$elem参数只是一个 jqLite 对象。最后，这使这是一个 jQuery 问题。我想指出，这与 AngularJs 的方式有点背道而驰。通常，您应该从模型中其他地方的数据生成表。这样你就永远不必从 DOM 中读取数据。
However, here's one way to generate the output you want:
但是，这是生成所需输出的一种方法：
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);
}
}
回答by Chad Robinson
OK, I literally hate myself for saying this (grin) because this type of question is almost always the lead-in to using the wrong pattern to do something more sophisticated in AngularJS. BUT, since it does get asked a lot, this does totally work:
好吧，我真的很讨厌自己这么说（咧嘴笑），因为这类问题几乎总是导致使用错误的模式在 AngularJS 中做一些更复杂的事情。但是，因为它确实被问了很多，所以这完全有效：
http://plnkr.co/edit/XnT5tGjeDUVGHJ3pzFpc?p=preview
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);
There's nothing really Angular-ish about this. $elem is just a lightweight wrapper around the HTML element for the table. It's HTML5 so there's a <thead>element followed by a <tbody>, which the first forEach follows down the chain to get each <tr>- the children of the <thead>. The inner
没有什么是真正的 Angular-ish。$elem 只是一个围绕表格 HTML 元素的轻量级包装器。它是 HTML5，所以有一个<thead>元素后跟 a <tbody>，第一个 forEach 沿着链向下获取每个<tr>- 的子元素<thead>。内在
回答by Marplesoft
In this case $elemis just a jQuery (or jqLite) object. See the link that @Yoshi posted above. Traversing it to get child nodes is less of an angular question and really just a jQuery question. You might try something like:
在这种情况下$elem只是一个 jQuery（或 jqLite）对象。请参阅上面@Yoshi 发布的链接。遍历它以获取子节点不是一个角度问题，而实际上只是一个 jQuery 问题。您可以尝试以下操作：
$elem.find('td').each(function(index) {
$(this).... // do something with $(this)
});
回答by Anand
Use the following query to get all the td.
使用以下查询获取所有 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);
}
You can then loop and get all array of objects
然后您可以循环并获取所有对象数组
Plunkr : http://plnkr.co/edit/Z5XNp4q4F7sbN5SvjCll?p=preview
Plunkr：http://plnkr.co/edit/Z5XNp4q4F7sbN5SvjCll?p=preview
