如何从混合了html元素的表中提取值答案

【问题标题】：How to extract value from table with mixture of html elements如何从混合了html元素的表中提取值
【发布时间】：2016-07-03 03:46:27
【问题描述】：

我有一个表，其中包含纯文本、输入文本框、选择和跨度的组合。我需要逐行遍历表格并提取每个单元格中的值。在我的表中，所有 <tr> 都有一个特定的 css 类。

  $(".gridBody").each(function(rowindex){
                $(this).find("td").each(function(cellIndex){
                   var cell = $(this).first()
   })

在我的调试器中，我可以看到 $(this).first() 返回了什么样的对象，但我不知道如何进入它的属性。我曾尝试使用 jqueries html 解析器将其转回 dom 元素，但我没有得到例如文本框，而是得到类似 [[html inputtextbox]] 的东西。大多数适用于常规 dom 元素的方法都不适合我。

如果我使用 $(this)[0].innerText 当单元格的内容是纯文本时它会返回正确的值，但当它们是输入形式或嵌套在 span 元素中时则不会。我真正想做的是得到一个常规的 html dom 元素，然后我可以用 $.is() 检查它的类型，然后从那里改变很多逻辑。

如何获取表格单元格中的第一个子元素作为 html dom 元素，我可以像任何其他 dom 元素一样使用 jquery 操作它？

【问题讨论】：

可能是一个 jsFiddle，里面有你的表数据？
如果您想确定您正在处理的标签类型，请查看stackoverflow.com/questions/5347357/…。你是否一直都知道你想要的对象是内联的第一件事？
附带说明，当使用 .each 迭代 jquery 集合时，在该上下文中 $(this) === $(this).first() 因为 this 对应于集合中的单个元素。

标签： javascript jquery

【解决方案1】：

var collected = $("#myTable td").find("input, textarea, span").map(function(){
  return this.value || this.textContent;
}).get();

console.log( collected ); // an array holding values or text

http://jsbin.com/zewixe/2/edit?html,css,js,console,output

如果您只想要直接的孩子而不是使用正确的> 选择器

(">input, >textarea, >span")

【讨论】：

这适用于输入框和跨度，但它错过了计划文本。类似于纯文本。有什么建议？谢谢

【解决方案2】：

我会这样做：

<table>
  <tr>
    <td> 
      <h1>Some stuff.</h1>
    </td>
  </tr>
  <tr>
    <td> 
      <input type="text" value="1"/>
    </td>
    <td> 
      <input type="text" value="2"/>
    </td>
  </tr>
  <tr>
    <td> 
      <input type="text" value="3"/>
    </td>
  </tr>
  <tr>
    <td> 
      <input type="text" value="4"/>
    </td>
  </tr>
</table>

$(函数() {

function getFormData(selector){
    'use strict';

    var formTypes = {
        text: 'text',
        radio: 'radio',
        select: 'select'
    },
    values = [];

    $(selector).children().each(function(idx, childNode) {
        if (childNode.getAttribute('type') && formTypes[childNode.getAttribute('type')]) values.push(childNode.value);
    }); 

    return values;
}

alert(
    getFormData('table tr td.someClass')
    );

})();

http://codepen.io/nicholasabrams/pen/RaKGjZ

【讨论】：