将第一个Tr移动到头部，并使用jquery将td替换为头部

move first Tr to thead and replace td to th using jquery

本文关键字：头部 jquery td 替换 第一个 Tr 移动      更新时间：2023-09-26

我有一个像这样的ajax调用返回的字符串

<table>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>

现在我想把它重组为

<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr></thead>
<tbody>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>

如何在jQuery中做到这一点?

下面这行插入一个标题，并将第一个tr复制到其中

$(data.d).prepend("<thead></thead>").find("thead").html($(data.d).find("tr:eq(0)"))

我试图通过使用

这行来删除前一行之后的第一行。
$(data.d).find("tbody tr:eq(0)").remove()

如何添加thead，将tbody中的第一个tr移动到它，将其中的所有td替换为th，最后从tbody中删除第一个tr

一些循序渐进的解决方案，

var jsonString = "<table><tbody><tr><td>Name</td><td>Age</td></tr><tr><td>Ron</td><td>28</td></tr></tbody></table>";
var t =$(jsonString); //jquery Table Object
var firstTR = $('tr:first',t); //geting firstTR
$('<thead></thead>')
  .prependTo(t)
  .append(
    $('td',firstTR).map(
       function(i,e){
         return $("<th>").html(e.textContent).get(0);
       }
    )
);
firstTR.remove();//removing First TR
$("#div").html(t);
//Output
console.log(t.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
 
</div>

我的建议是:

  • 获取第一行，并为每个单元格创建相应的
    • 单元格
  • 在表体中添加表头，添加创建的表头单元格
  • 删除第一个表体行

$(function () {
  var th = $('table tbody tr:first td').map(function(i, e) {
    return $('<th>').append(e.textContent).get(0);
  });
  $('table tbody').prepend($('<thead>').append(th)).find('tr:first').remove();
  console.log($('table').html());
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table>
    <tbody>
    <tr>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr>
        <td>Ron</td>
        <td>28</td>
    </tr>
    </tbody>
</table>

一个更简单的解决方案:

t = $('table#tbl2')
firstTr = t.find('tr:first').remove()
firstTr.find('td').contents().unwrap().wrap('<th>')
t.prepend($('<thead></thead>').append(firstTr))
table thead tr th {
  background: green;
}
table tbody tr td {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1"><tbody><tr><td>Name</td><td>Age</td></tr><tr><td>Ron</td><td>28</td></tr></tbody></table>
<br /><br />
<table id="tbl2"><tbody><tr><td>Name</td><td>Age</td></tr><tr><td>Ron</td><td>28</td></tr></tbody></table>

下面是对代码的解释:
  1. 从dom中删除第一个tr元素
  2. 找到td元素，取出它们的contents()并打开td。
  3. 用th标签包装td的contents()。
  4. 将<thead>标签添加到表中，并将tr添加到thead

你可以做:

$('table').prepend('<thead></thead>'); // Add thead
$('table tr:eq(0)').prependTo('table thead'); // move first tr to thead
$('table thead').html(function(id, html) {  // you might use callback to set html in jquery
    return html.replace(/td>/g, 'th>'); // replace td by th
                       // use regExp to replace all
});

当你使用。prependto时，这将元素移动到另一个顶部，你可以在jquery的。html函数中使用回调。

参考:

http://api.jquery.com/prependto/

http://api.jquery.com/appendto/

多年过去了(所以没有jQuery了)，我想这样做，并像这样解决了它。这个想法是1)获得第一行(<tr>)， 2)将第一行上的每个<td>标签替换为<th>。

const txt = `<table>
<tbody>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>`;
const el = document.createElement('table');
el.innerHTML = txt;
[...el.querySelector('tr').querySelectorAll('td')].forEach(td => 
  td.outerHTML = td.outerHTML
  .replace(/<td([^>]*)>/, '<th$1>')
  .replace(/<'/td>/, '</th>')
);
console.log(el.outerHTML);
/*
<table>
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ron</td>
<td>28</td>
</tr>
</tbody>
</table>
*/
相关文章：