0

如何从我的 HTML 代码中删除所有标签: table、、、 ?最后我想补充所有tbodytr

<td>
    <input id="selectOne" type="radio" value="1" name="selectOneRadio">   
</td>

<li>
    <input id="selectOne" type="radio" value="1" name="selectOneRadio"> 
</li> 

我需要一个 jQuery 函数。请帮我 :)

<table>
    <tbody>
        <tr>
            <td>
                <input id="selectOne" type="radio" value="1" name="selectOneRadio">
                <label for="selectOne">
            </td>  
       </tr>    
    </tbody>
</table>

从评论...

label元素应该保留。我试过:

$('table td').each(function () {
    $(this).replaceWith(function () {
        return $('<li>' + this.innerHTML + '</li>')
    })
});

接着

jQuery.fn.unwrap = function (el) {
    return this.each(function () {
        $(this.childNodes).appendTo(this.parentNode);
    });
};
$('tr, table, tbody').unwrap().remove();

但这对我不起作用。

4

3 回答 3

2

用 . 创建一个列表document.createElement。然后循环遍历表的rows[]数组,对于每个数组,获取cells[]数组并执行所需的操作以将其放入列表项中(可能document.createElement是创建列表项,然后将innerHTML单元格的复制到其中)。

完成后,使用insertBefore将列表放在桌子所在的位置,最后使用removeChild摆脱桌子。


上述实现:

function replaceTableWithList(tableid) {
    var table = document.getElementById(tableid),
        rows = table.rows, cells, list = document.createElement('ul'),
        len = rows.length, i, item;
    for( i=0; i<len, i++) {
        item = list.appendChild(document.createElement('li'));
        cells = rows[i].cells;
        while(cells[0].firstChild) item.appendChild(cells[0].firstChild);
        // this only gets the contents of the first cell in a row
        // to get the whole row will need another loop
    }
    table.parentNode.replaceChild(list,table);
}
于 2012-08-08T23:06:12.477 回答
1

我会使用展开/包装功能:

$('table').contents().unwrap(); $('tr').contents().unwrap(); $('td').contents().unwrap().wrap('<li/>');

于 2012-08-08T23:21:07.093 回答
0

我会将您的桌子包装在某种容器中:

<div id="content">
    <table>
        <tbody>
            <tr>
                <td>
                    <input type="radio" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" />
                </td>
            </tr>
        </tbody>
    </table>
</div>​​​​

然后使用 jQuery 并执行以下操作:

// Hide the table
$('#content table').hide();

// Append a ul to the content div
$('<ul />').appendTo('#content');

// For each td, wrap children in an li and append to the ul​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
$('#content table td').each(function (index, element) {
    $(element).children().appendTo('#content ul').wrap('<li />');
});
于 2012-08-08T23:40:52.130 回答