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

javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)

表格.html
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格操作</title>
<script type= "text/javascript" src="domutil.js" ></script>
</head>

<body>  
                <!--以下数据纯属虚构,为排序而随意填写的-->
    <table id="tab" border="1" style =" align:center;text-align:center ">
        <thead style="background:#0000FF" onmouseover="over(this)" onmouseout="out(this)">
            <tr>
                <th><input type="checkbox" name="quan" onclick="quan()" style="cursor:pointer"/>全选</th>
                <th onclick="sortTable('tab',1,'int')" style="cursor:pointer">编号</th>
                <th onclick="sortTable('tab',2,'汉字')" style="cursor:pointer">编程语言</th>
                <th onclick="sortTable('tab',3,'汉字')" style="cursor:pointer">所属公司</th>
                <th onclick="sortTable('tab',4,'float')" style="cursor:pointer">市场份额</th>
                <th onclick="sortTable('tab',5,'date')" style="cursor:pointer">诞生日期</th>
                <th style="cursor:pointer">操作</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <tr style="background:#00FF00" onmouseover="over(this)" onmouseout="out(this)">
                <td><input type="checkbox" name="checkbox" /></td>
                <td width=100 id="ID">4</td>
                <td id="name" width="100">Java</td>
                <td id="company" width="100" >甲骨文公司</td>
                <td id="age" width="100">47.6</td>
                <td id="date" width="100">1970/09/09</td>
                <td ><input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)"/></td>
            </tr>
            <tr style="background:#00FFFF" onmouseover="over(this)" onmouseout="out(this)">
                <td><input type="checkbox" name="checkbox" /></td>
                <td width=100 id="ID">6</td>
                <td id="name" width="100">C</td>
                <td id="company" width="100">微软公司</td>
                <td id="age" width="100">30.3</td>
                <td id="date" width="100">1980/09/09</td>
                <td ><input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)"/></td>
            </tr>
            <tr style="background:#00FF00" onmouseover="over(this)" onmouseout="out(this)">
                <td><input type="checkbox" name="checkbox" /></td>
                <td width=100 id="ID">3</td>
                <td id="name" width="100">PHP</td>
                <td id=&quo