日期:2014-05-16  浏览次数:20853 次

JS删除tbody问题
有这样一个表格
<table>
    <thead>
        <tr> <td> 标题 </td> </tr>
    </thead>

    <tbody> </tbody>

    <tfoot>
        <tr> <td> 其它 </td> </tr>
    </tfoot>
</table>

第一次我点击一个按扭,tbody里加了三条数据成了
<table>
    <thead>
        <tr> <td> 标题 </td> </tr>
    </thead>

    <tbody>
        <tr> <td> 内容1 </td> </tr>
        <tr> <td> 内容2 </td> </tr>
        <tr> <td> 内容3 </td> </tr>
    </tbody>

    <tfoot>
        <tr> <td> 其它 </td> </tr>
    </tfoot>
</table>

然后我想再点一个按扭,然后要把tbody里的内容换成新的内容,例:
<table>
    <thead>
        <tr> <td> 标题 </td> </tr>
    </thead>

    <tbody>
        <tr> <td> 新新新新新新 </td> </tr>
        <tr> <td> 新新新新新新 </td> </tr>
        <tr> <td> 新新新新新新 </td> </tr>
    </tbody>

    <tfoot>
        <tr> <td> 其它 </td> </tr>
    </tfoot>
</table>
请问这样怎么做,要支持IE和火狐的????????????

------解决方案--------------------
<table>
<thead>
<tr> <td> 标题 </td> </tr>
</thead>
<tbody id= "tbody ">
<tr> <td> 内容1 </td> </tr>
<tr> <td> 内容2 </td> </tr>
<tr> <td> 内容3 </td> </tr>
</tbody>
<tfoot>
<tr> <td> 其它 </td> </tr>
</tfoot>
</table>
<button onclick= "clearData() "> 清空 </button>
<button onclick= "fillData() "> 填加 </button>
<script type= "text/javascript ">
<!--
var _tbody = document.getElementById( "tbody ");
function fillData()
{
for(var i = 0; i < 3 ;i++)
{
var _tr = document.createElement( "tr ");

var _td = document.createElement( "td ");
_td.innerHTML = "新新新新新新 ";
_tr.appendChild(_td);
_tbody.appendChild(_tr);
}
}

function clearData()
{
for(var i = _tbody.childNodes.length - 1; i > = 0 ;i--)
{
_tbody.removeChild(_tbody.childNodes[i]);
}

}
//-->
</script>