使用jQuery循环遍历HTML表格

Question

我有一个HTML表格，我想基本上循环遍历每一行和每个单元格，并简单地打印出结果。 其中一件事是，一些单元格有输入框，一些单元格有选择下拉菜单，而另一些单元格则包含TD内部的原始内容。

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

- leora

Answer 1

在线演示：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);
});

- Sampson

Answer 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 意味着获取所有作为某些 id="myTable" 的子元素的 <tr> 元素。同样地，td > * 意味着获取此刻由 this 对象表示的 <td> 元素的所有子元素。这些都是 CSS 选择器，有多种在 DOM 中选择项目的方法。请参阅jQuery 文档以了解更多有关选择器的信息。查看jQuery 核心文档可以了解 jQuery 对象上所有可用方法的详细参考资料。

- Anurag

---

一旦您进入循环，如何确定是否存在输入框、选择框或普通文本？ - leora

子选择器“>`”在这种情况下对我也不起作用。我将在SO上发布一个关于此的问题。但是奇怪的是后代选择器起作用了。并且还有一个括号缺失的地方 :) 已更新代码。 - Anurag

子选择器无法正常工作，因为浏览器会插入一个隐式的 tbody 元素。所以正确的写法应该是 #myTable > tbody > tr - 更多信息请参考这个问题：https://dev59.com/UkvSa4cB1Zd3GeqPd1wa - Anurag

Anurag，你考虑过我的解决方案了吗？ - Sampson

Jonathan，这确实是一个非常优雅的解决方案。 - Anurag

Answer 3

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

- David Hedlund

---

谢谢，这很有效。有没有办法知道何时移动到另一行以获取当前行？ - leora

Answer 4

您可以使用以下代码。

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

- usman mehmood