使用jQuery操縱表格-增加、刪除行和列

fmms 12年前發布 | 80K 次閱讀 jQuery Ajax框架

使用jQuery操縱表格-增加、刪除行和列，示例代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.cl1{
    background-color:#FFFFFF;
}
.cl2{
    background-color:#FFFF99;
}
</style>
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    var rowCount = 0;
    var colCount = 2;



function addRow(){
    rowCount++;
    var rowTemplate = '<tr class="tr_'+rowCount+'"><td>'+rowCount+'</td><td class="cl1">內容'+rowCount+'</td><td class="cl1"><a href="#" onclick=delRow('+rowCount+')>刪除</a></td></tr>';
    var tableHtml = $("#testTable tbody").html();
    tableHtml += rowTemplate;
    $("#testTable tbody").html(tableHtml);
}

function delRow(_id){
    $("#testTable .tr_"+_id).hide();
    rowCount--;
}

function addCol(){
    colCount++;
    $("#testTable tr").each(function(){

        var trHtml = $(this).html();
        trHtml += '<td onclick="delCol('+colCount+')">增加的td</td>';
        $(this).html(trHtml);
    });

}

function delCol(_id){

    $("#testTable tr").each(function(){
        $("td:eq("+_id+")",this).hide();            
    });
    colCount--;
}

function mover(_id){
    $("#testTable tr:not(:first)").each(function(){
        $("td:eq("+_id+")",this).removeClass("cl1");
        $("td:eq("+_id+")",this).addClass("cl2");
    });
}

function mout(_id){
    $("#testTable tr:not(:first)").each(function(){
        $("td:eq("+_id+")",this).removeClass("cl2");
        $("td:eq("+_id+")",this).addClass("cl1");
    });
}



</script>
<title>jquery操作表格測試</title>
</head>
<body>
    <table id="testTable" border="1" width="500">
        <tr>
            <td>序號</td>
            <td onmouseover="mover(1);" onmouseout="mout(1);">內容</td>
            <td onmouseover="mover(2);" onmouseout="mout(2);">操作</td>
        </tr>
    </table>
    <input type="button" value="添加行" onclick="addRow();"/>
    <input type="button" value="添加列" onclick="addCol();"/>
</body></pre>
 本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！