Question

我有一个表，其中包含纯文本，输入文本框，选择和跨度的组合。我需要逐行遍历表并拉出每个单元格中的值。在我的表中，所有<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操作？

Answer 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")

Answer 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（）{

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

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

2 个答案: