javascript - 使用jquery css修改html

Question

我有这样的html代码：

<table class="tbl">
    <tr>
        <td colspan="2">1<input class="text social" type="text" /></td>
        <td colspan="2">2 <input class="text social" type="text"/></td>                             
    </tr>       
</table>

我需要的是我希望它是这样的：

 <table class="tbl">
    <tr>
        <td colspan="2">1</td>
        <td><input class="text social" type="text" /></td>                                  
    </tr>
    <tr>
        <td colspan="2">2</td>
        <td><input class="text social" type="text"/></td>   
    </tr>   
</table>

我被这个卡住了，请任何人帮助我，谢谢。

Answer 1

“使用 jquery css 修改 html”

我不知道“使用 jquery css”是什么意思，但这是使用 jQuery 方法的一种方法：

$(document).ready(function () {
    var $table = $(".tbl"),
        $newTR = $("<tr></tr>").appendTo($table);
    $newTR.append($table.find("td").last());
    $table.find("tr").each(function() {
        $("<td></td>").append($(this).find("input")).appendTo(this);
    });
});

演示：http: //jsfiddle.net/NWZGV/

Answer 2

$('.text social').insertBefore('</td><td>');
$('td[colspan='2']').first().insertAfter('</td><td>');

Answer 3

现场演示

您可以使用 jquery 更改 html

HTML：

<table class="tbl" border="1">
    <tr>
        <td colspan="2">1<input class="text social" type="text" /></td>
        <td colspan="2">2<input class="text social" type="text" /></td>
    </tr>
</table>
<br />
<input type="button" value="change" id="btn" />

查询：

$(function () {
    $('#btn').on('click', function () {
        var s = "<tr>"
            + "<td colspan='2'>1</td>"
            + "<td><input class='text social' type='text' /></td>"  
            + "</tr>"
            + "<tr>"
            + "<td colspan='2'>2</td>"
            + "<td><input class='text social' type='text' /></td>"   
            + "</tr>";
        $('table').html('');
        $('table').append(s);
    });
});

Answer 4

试试这个，

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

演示