使用 jQuery 循环遍历 html 表答案

【问题标题】：Looping through html table with jQuery使用 jQuery 循环遍历 html 表
【发布时间】：2011-01-05 17:57:44
【问题描述】：

我有一个 html 表格，我想基本上循环遍历每一行和每行的每个单元格，然后简单地打印出结果。一件事是一些单元格有输入框，一些有选择下拉菜单，还有一些在 TD 内有原始内容。

简单地循环遍历 html 表格中的每个单元格并获取每个单元格的结果的最快方法是什么。对于选择下拉菜单，我想捕获选择的值（而不是显示文本）。

【问题讨论】：

【解决方案1】：

您可以使用以下代码。

$(':input', '#tableId').val('');

【讨论】：

【解决方案2】：

由于每个单元格内只有一个元素，您可以执行以下操作：

$("#myTable tr").each(function() {
    // this represents the row
    $("td > *", this).each(function() {
        // nodeName attribute represents the tag - "INPUT" if element is <input>
        // use the type attribute to find out exactly what type 
        // of input element it is - text, password, button, submit, etc..
        if(this.nodeName == "INPUT") {
            console.log($(this).attr("type"));
        }
    });
});

#myTable > tr 表示获取所有<tr> 元素，它们是某些id="myTable" 的子元素。

同样，td > * 表示立即获取由 this 对象表示的 <td> 元素的所有子元素。这些都是 CSS 选择器，并且有多种方法可以在 DOM 中选择项目。请参阅jQuery docs 了解有关选择器的更多信息。

jQuery core 文档是了解 jQuery 对象上所有可用方法的绝佳参考。

【讨论】：

一旦你进入循环，你如何知道是否有输入框、选择或常规文本？
只有 1 个元素还是可以有多个？
永远是一个元素
我在 firebug 中调试它，它似乎到达了第一行并一直走到最后，就好像它跳过了所有代码一样。你确定第一行是正确的吗？？
在这种情况下，子选择器 > 也不适合我。我将在 SO 上发布一个关于它的问题。但奇怪的是后代选择器有效。而且某处还缺少一个括号:) 更新了代码。

【解决方案3】：

在线演示：http://jsbin.com/ewazu

我首先循环遍历每个TD 并评估first-child 是否是input 元素。如果是，我们返回它的值。如果不是，我们询问它是否产生文本。如果它产生文本，我们要求文本。如果它不产生文本，我们请求TD 的 HTML：

$("table td").each(function(i,o){
  var value = ( $(":first-child", this).is(":input") ) 
    ? $(":first-child", this).val() 
    : ( $(this).text() != "" ) 
      ? $(this).text() 
      : $(this).html() ;
  alert(value);
});

【讨论】：

【解决方案4】：

很难确切地知道你想要什么，但如果你可以假设带有选择框的 td 只有那个，带有输入的 td 只有一个文本字段，你可以做这样的事情：http://jsbin.com/alara3/edit

【讨论】：

谢谢。 .这很好用。 .有没有办法知道你什么时候移动到另一行来获取当前行？