使用 Jquery 、CSS 修改表中的 html 标记

modify the html tag in table using Jquery , CSS

本文关键字：html 标记 修改 Jquery CSS 使用      更新时间：2023-09-26

我有如下html代码：

<table class="table_inscription">
    <tr>
            <td colspan="2"><label class="social fb"><p class="nonetext">Facebook</p></label> <input class="text social" type="text" name="facebook" value="<?=$facebook;?>" /></td>
            <td colspan="2"><label class="social socialright sk"><p class="nonetext">SoundClick</p></label> <input class="text social" type="text" name="soundclick" value="<?=$soundclick;?>" /></td>                              
        </tr>   
</table>

我想将其更改为：

<table class="table_inscription">
    <tr>
            <td colspan="2"><label class="social fb"><p class="nonetext">Facebook</p></label> <input class="text social" type="text" name="facebook" value="<?=$facebook;?>" /></td>
    </tr>
    <tr>
            <td colspan="2"><label class="social socialright sk"><p class="nonetext">SoundClick</p></label> <input class="text social" type="text" name="soundclick" value="<?=$soundclick;?>" /></td>                              
    </tr>   
</table>

通过使用CSS JQUERY和其他方法，有人知道请帮助我，谢谢

您可以使用unwrap和wrap

演示 

$(function(){
   $('td').unwrap('<tr>');
   $('td').wrap('<tr>');
});

实际上，我今晚做了一些与此非常相似的事情。我最终只是简单地重建了表格：

var $newTableEntity = $('<table />');
$('.table_inscription td').each( function(index, td_element){
    var $newRow = $('<tr />').append( td_element );
    $newTableEntity.append( $newRow );
});
$('.table_inscription').replaceWith( $newTableEntity );

请注意，这是使用 jQuery。

试试这个，

var $table = $('table').clone();
$table.html('');
$('td').each(function () {
    var $tr = $('<tr/>').html($(this).clone());
    $table.append($tr);
});
$('table').remove();
$table.appendTo('body');

演示

读取 wrap（） 和解包（）

或者简单地说，

$('td').unwrap('<tr>');
$('td').wrap('<tr>');

演示 1

这可能适合您：

var table = $(".table_inscription");
var tds = table.find("td");
table.empty();
for(var i=0; i<tds.length; i++) {
    table.append($('<tr><td>' + tds.eq(i).html() + '</td></tr>'));
}

JSFIddle： http://jsfiddle.net/VSF38/

做一些类似的事情 

var val = $('.table_inscription').html();
val = val.replace("<tr>","");
val = val.replace("</tr>","");
val = val.replace("<td","<tr><td");
val = val.replace("</td>","</td></tr>");
$('.table_inscription').html("");
$('.table_inscription').html(val);

检查它是否有效。

使用jQuery。 这样， 将下面的代码放在底部或 head 标签之后

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('td').unwrap('<tr>');
        $('td').wrap('<tr>');
    });
  </script>
相关文章：