如何循环表格元素并使用JQuery检索数据元素？

我有一个HTML表看起来像这样在一个标准的HTML 4.01过渡页：如何循环表格元素并使用JQuery检索数据元素？

<table> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     <th>etc...</th> 
    </tr> 
    </thead> 
    <tbody id="tableBodyID"> 
    <tr class="rowElement" data-element="some-data-here"> 
     <td>Some Table Data</td> 
     <td>Some More Table data</td> 
     <td>etc.</td> 
    </tr> 
    <tr class="rowElement" data-element="some-data-here"> 
     <td>Some Table Data</td> 
     <td>Some More Table data</td> 
     <td>etc.</td> 
    </tr> 
    </tbody> 
</table>

我想遍历所有行和数据元素场拿到“数据”，并将其放置在一个使用JQuery的变量。我已经尝试了许多.children（），.data（）和.each（）的变体，但一直未能检索“数据”元素。

我已经试过（A $（文件）。就绪（）内块...）：

$('tbody > tr').each(function() { 
    alert($(this).data('element')); // CORRECTION - this works. 
}); 

$('tbody').children().each(function() { 
    alert($(this).data('element')); // CORRECTION - this works 
}); 

$('.rowElement').each(function(i, obj) { 
    rowValue = $(this); 
    alert(rowValue.data('element')); // CORRECTION - this works 
});

任何帮助是值得欢迎的。我正在使用HTML 4.01和JQuery 1.7.1。我一直在Firefox中进行测试，但需要支持其他标准浏览器Firefox，Opera，Safari，Chrome和IE8 +。

（编辑轻微语法变化）

实际问题就属于这种情况的问题，请参见下面的评论。问题解决了。

来源

2012-03-29 user1295718

我发现我的答案，在我的数据元素中使用了错误的情况。在我的html中，它是data-Element，我不知道它是浏览器，javascript还是jquery，但是data-Element被转换成数据元素，所以当我调用var时，我命名为.data（ '元素'）有那个名字做数据元素。感谢所有的输入，我喜欢我见过的代码。但在这种情况下，这是一个简单的案例错误。 – user1295718 2012-03-29 13:56:50

这个工作对我来说：

$('table').find('tbody > tr').each(function() { 
    alert($(this).data('element')); 
});

http://jsfiddle.net/LBKvm/

（它可能不是然而，最有效的方法）

来源

2012-03-29 13:09:14 Magrangs

使用.map和.get，可以将每个tr映射到element数据属性，以获得这些值的阵列。至于选择器，ID是最直接的，因为它直接指向tbody元素，其中您想要tr后代：http://jsfiddle.net/zeFGW/。

var elementValues = $("#tableBodyID tr.rowElement").map(function() { 
    return $(this).data("element"); // replace each `tr` with its `element` data 
}).get(); // turn jQuery object into an array

来源

2012-03-29 12:59:55 pimvdb

这不是我正在寻找的东西，但它确实做得很好，我可能最终会改变处理数据的方式来使用它。谢谢。 – user1295718 2012-03-29 13:52:01

你的逻辑/呼吁合作我，你有几个语法问题，但在之后的括号的应该是('element'));而且选择器也需要被引用，tbody的缺失应该是('tbody')等。

jsfiddle。（请注意我更换警报到CONSOLE.LOG呼叫）

测试在Chrome 17

是您的代码是什么张贴在不同的问题？

来源

2012-03-29 13:09:15 Louis

如果您还有问题，请告诉我，我会根据需要更新我的答案。 – Louis 2012-03-29 13:11:50

感谢您的帮助，我找到了解决方案，我的html显得更加复杂，因为它是从几个地方动态生成的，我正在创建一个试图仅显示与问题（或感知问题）相关的部分的示例。问题最终成为数据元素名称中的一个案例问题。当我生成标记时，我在名称中使用了大写字母，并且我不知道它是我正在使用的编程语言，还是浏览器，javascript或jquery，但它只在我在名称中使用全部小写字母。 – user1295718 2012-03-29 14:00:06

我也更正了例子 – user1295718 2012-03-29 14:00:58

如何循环表格元素并使用JQuery检索数据元素？

回答

相关问题