Question

我需要对DOM进行更改。我需要使用paragaraphs或类似的东西来呈现表格内容。为此我需要获取每行表的数据。我怎么能这样做？

HTML示例：

<table style="width:300px">
    <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
    </tr>
</table>

输出应该是这样的 - Jill Smith 50和Eve Jackson 94

我写过这样的内容，但它会遍历网页中的所有<td>标记。不排。

 $("table").each(function() {
    $("tr").each(function(){
        $("td").each(function(){                
            label = $('td').text(); 
        });         
    alert(label);
 });

Answer 1

您可以使用each()遍历行，然后使用单元格

<强> Live Demo

$("table tr").each(function(){
  text = "";
  $(this).find('td').each(function(){
     text += $(this).text() + " ";      
  });
    alert(text);
});

Answer 2

尝试，

var groupedVales = [];

$('table tr').each(function(){
  groupedVales[groupedVales.length] = 
          $(this).find('td').map(function(){ $(this).text(); }).get().join(' ');
});

现在groupedvales包含将按照您的期望分组的元素

DEMO

Answer 3

试试，

   FLAG = true;
    text2 = "";
    $("table tr").each(function(){  
       text1="";       
       $(this).find('td').each(function(){
         text1 += $(this).text() + " ";      
         });
        if(FLAG)
        {
           text2=text1+" "+"and"+"  "
           FLAG=false;
        }
        else
        {
            text2+=text1
        }  
    });
    alert(text2);

Answer 4

试试这个

$("table tr").each(function (i, val) {
   var t=$(this).map(function (i, val) {
    return $(this).text();
   }).get();
   alert(t);
});

<强> Demo

Answer 5

Demo Fiddle

$('table tr').each(function () {
    $('body').append($(this).text() + "<br/>");
    alert($(this).text());
});

遍历每个<tr> .text()属性...

Answer 6

为表格提供一个ID（例如：mytable），然后执行以下操作：

$("#mytable").find("tr").each(function () {
  var rowtext = "";
  $(this).find("td").each(function () {
    rowtext += $(this).text() + " ";
  });
});

为何选择身份证？ ID选择器比元素选择器更快，并确保代码仅针对您想要的表运行，如果您希望相同的代码在多个表上运行，则类选择器将是理想的选择。

为什么不$（＆＃34; #mytable tr＆＃34;）？ jquery从右到左读取选择器，这意味着jquery将首先找到每个＆＃34; tr＆＃34;在文档中的元素然后过滤它们有一个父ID和＃34; mytable＆＃34;。像这样分离选择器：$（＆＃34;＃mytable＆＃34;）。find（＆＃34; tr＆＃34;）确保jquery只选择＆＃34; tr＆＃34;元素内的元素＆＃34; mytable＆＃34;标识。

Answer 7

这是另一种解决方案。你可以试试！

$('table tr').each(function(i,e){
    temp=[];
    $(this).find('td').each(function(){
        temp.push($(this).text());
    });
    resultBlock.append('"' + temp.join(' ') + '"');

    if($(this).index()!=($('table tr').length-1)) resultBlock.append(' and ');
});

<强> FIDDLE

分别逐行访问表数据

7 个答案:

DEMO