加<th>每个文本​​- jquery

Question

我想显示我的表格数据到移动布局的不同行中。所以我想要做的是在伪选择器之前添加值。所以它应该像这样显示。

名称：XYZ

年龄：20

名称：ABC

年龄：30

请看到我的jQuery代码。这是工作的罚款如果只有一个，但如果有多个然后它不工作

JQuery的：

if ($('table').length) { 
    var th_data; 
    $('table th').each(function (index) { 
     var index_th = index; 
     th_data = $(this).text(); 
     $('table td').each(function (index) { 
      var index_td = index; 
      if (index_th == index_td) { 
       $(this).attr('data-content', th_data); 
      } 
     }); 
    }); 
} 

CSS代码：

table th{display:none;} 
table td:before{content:attr(data-content) '';position:absolute;top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap;} 
table td{position:relative;padding-left:50%;display:block;} 

解决方案：

我我想我已经明白了。所以更新的JQuery代码是这样的。它在多个工作正常

/* Changing the tabular data into rows */ 
if ($('table').length) { 
    var th_data; 
    $('table').each(function() { 
     var _table = $(this); 
     $(this).find('th').each(function (index) { 
      var index_th = index; 
      th_data = $(this).text(); 
      _table.find('tr').each(function() { 
       $(this).find('td').each(function (index) { 
        var index_td = index; 
        if (index_th == index_td) { 
         $(this).attr('data-content', th_data); 
        } 
       }); 
      }); 
     }); 
    }); 
} 

Answer 1

两个地方$（this）是不一样的。所以将它保存为一个变量。试试这个，希望能有点帮助

if ($('table').length) { 
    var th_data; 
    $('table th').each(function (index) { 
     var index_th = index; 
     var th = $(this); 
     th_data = $(th).text(); 
     $('table td').each(function (index) { 
      var index_td = index; 
      if (index_th == index_td) { 
       var td = $(this); 
       $(td).attr('data-content', th_data); 
      } 
     }); 
    }); 
} 

Answer 2

if ($('table').length) { 
 
    var th_data = new Array(), 
 
     temp = ''; 
 
    $('table th').each(function (index) { 
 
     th_data[index] = $(this).text(); 
 
    }); 
 
    $('table tr').each(function (index) { 
 
     var tr = $(this); 
 
     $(this).find('td').each(function(index){ 
 
      temp+= th_data[index]+':'+$(this).text()+'<br />'; 
 
     }); 
 
     temp+= '<br />'; 
 
    }); 
 
    $('.result').append(temp); 
 
}

table td{ 
 
border: 1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="header"> 
 
     <th>Name</th> 
 
     <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
     <td>John</td> 
 
     <td>10</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Adam</td> 
 
     <td>15</td> 
 
    </tr> 
 
</table> 
 
<div class="result"><Br /><br /><b>Output:</b><br /></div>

Answer 3

与原代码的问题是，选择$('table td')得到这一切的一切行的<td>元素。

相反，对于每个<th>元素，循环遍历主体行并使用.eq()函数在该行中获取正确的<td>。

$('table').each(function() { 
    var $table = $(this); 
     $rows = $table.children('tbody').children(); 
    $table.children('thead').children().children().each(function(i) { 
     var text = $(this).text(); 
     $rows.each(function() { 
      $(this).children().eq(i).attr('data-content', text); 
     }); 
    }); 
}); 

jsfiddle