首页 > 代码库 > 操作表格

操作表格

<!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>
    <title>Jquery 操作 Table</title>
    <script src="http://www.mamicode.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <!--自定义的js  start-->
    <script>
  $(document).ready(function () {
   $("#btn1").bind("click", delOneRow),
   $("#btn2").bind("click", delOneCol),
   $("#btn3").bind("click", delNotAllRow),
   $("#btn4").bind("click", delNotAllCol),
   $("#btn5").bind("click", hiddenRow),
   $("#btn6").bind("click", hiddenCol),
   $("#btn7").bind("click", insertRowLast),
   $("#btn8").bind("click", insertRowindex),
   $("#btn9").bind("click", getCellValue),
   $("#btn10").bind("click", getColValue),
   $("#btn11").bind("click", getRowlValue),
   $("#btn12").bind("click", myColSpan),
   $("#btn13").bind("click", myColSplit),
   $("#btn14").bind("click", myRowSpan),
   $("#btn15").bind("click", myRowSplit),
   $("#ckbAll").bind("click", checkAll),
   $("#table4 tr:gt(0) td:last-child input:checkbox").bind("click",checkOne);
    

   //鼠标移动到行变色,单独建立css类hover
   //tr:gt(0):表示获取大于 tr index 为0 的所有tr,即不包括表头
   $("#table1 tr:gt(0)").hover(
   function () { $(this).addClass("hover") },
   function () { $(this).removeClass("hover") }),

   //奇偶行不同颜色
   $("#table2 tbody tr:odd").css("background-color", "#bbf"),
   $("#table2 tbody tr:even").css("background-color", "#ffc"),
   //当然也可以单独建立css 类 odd 和 even
   //$("#table2 tbody tr:odd").addClass("odd"),
   //$("#table2 tbody tr:even").addClass("even"),

   //点击#table3 的单元格返回 单元格索引
   $("#table3 td").click(function () {
    var tdSeq = $(this).parent().find("td").index($(this));
    var trSeq = $(this).parent().parent().find("tr").index($(this).parent());
    alert("第" + (trSeq) + "行,第" + (tdSeq+1) + "列");
   })
  });

  //删除指定行(第二行)
  function delOneRow() {
   $("#table3 tr:gt(0):eq(1)").remove();
  }

  //删除指定列第二列
  function delOneCol() {
   //eq:获取子元素索引从 0 开始
   $("#table3 tr th:eq(1)").remove();
   //nth-child:获取子元素从 1 开始
   $("#table3 tr td:nth-child(2)").remove();
  }

  //删除第二行外的所有行
  function delNotAllRow() {
   $("#table3 tr:gt(0):not(:eq(1))").remove();
  }

  //删除第二列外的所有列
  function delNotAllCol() {
   $("#table3 tr th:not(:eq(1))").remove();
   $("#table3 tr td:not(:nth-child(2))").remove();
  }

  //隐藏指定行 第二行
  function hiddenRow() {
   $("#table3 tr:gt(0):eq(1)").hide();
   //$("#table3 tr:gt(0):eq(1)").css("display", "none")
   //显示
   //$("#table3 tr:gt(0):eq(1)").css("display", "");
  }

  //隐藏指定列 第二列
  function hiddenCol() {
   $("#table3 tr th:eq(1)").hide();
   $("#table3 tr td:nth-child(2)").hide();
   //$("#table3 tr th:eq(1)").css("display", "none");
   //$("#table3 tr td:nth-child(2)").css("display", "none");
   //显示
   //$("#table3 tr th:eq(1)").css("display", "");
   //$("#table3 tr td:nth-child(2)").css("display", "");
  }

  //在最后插入新行
  function insertRowLast() {
   var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
   $("#table3 tr:last").after(newRow);
  }

  //在第二行后插入行
  function insertRowindex() {
   var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
   $("#table3 tr:gt(0):eq(1)").after(newRow);
  }

  //获得单元格内值 比如 2*3
  function getCellValue() {
   var v = $("#table3 tr:gt(0):eq(1) td:eq(2)").text();
   alert(v);
  }

  //获得一列的所有值 比如第二列
  function getColValue() {
   var v = "";
   $("#table3 tr td:nth-child(2)").each(function () {
    v += $(this).text()+" ";
   });
   alert(v);
  }

  //获得一行所有值 比如第二行
  function getRowlValue() {
   var v = "";
   $("#table3 tr:gt(0):eq(1) td").each(function () {
    v += $(this).text() + " ";
   });
   alert(v);
  }

  //横向合并单元格 比如合并 第二行 第二个和第三个单元格
  function myColSpan() {
   $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 2);
   $("#table3 tr:gt(0):eq(1) td:eq(2)").remove();
  }

  //拆分单元格将刚才的单元格还原
  function myColSplit() {

   //注意不能使用
   //$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan");
   $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 1);
   $("#table3 tr:gt(0):eq(1) td:eq(1)").after("<td>第二行第三列</td>")
   
  }

  //纵向合并单元格 比如和并第二行第二个单元格和第三行第二个单元格
  function myRowSpan() {   
   $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 2);
   $("#table3 tr:gt(0):eq(2) td:eq(1)").remove();
  }

  //纵向拆分单元格 将刚刚合并的单元格还原
  function myRowSplit() {
   $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 1);
   //在下面行第一个单元格后插入单元格
   $("#table3 tr:gt(0):eq(2) td:eq(0)").after("<td>第三行第二列</td>");
  }

  function checkAll() {
   if ($("#ckbAll").attr("checked")) {
    $("#table4 tr:gt(0) td:last-child input:checkbox").attr("checked", true);
   }
   else {
    $("#table4 tr:gt(0) td:last-child input:checkbox").attr("checked", false);
   }
  }

  function checkOne() {
   var i = $("#table4 tr:gt(0) td:last-child input:checkbox").length;
   var c = 0;
   $("#table4 tr:gt(0) td:last-child input:checkbox").each(function () {
    if ($(this).attr("checked")) {
     c += 1;
    }
    else {
     return false;
    }
   });
   if (i == c) {
    $("#ckbAll").attr("checked", true);

   }
   else {
    $("#ckbAll").attr("checked", false);
   }
  }
 </script>

 <!--自定义的js  end-->

    <style type="text/css">
        table
        {
            border-collapse: collapse;
            border-spacing: 0;
            margin-right: auto;
            margin-left: auto;
            width: 800px;
        }
        th, td
        {
            border: 1px solid #b5d6e6;
            font-size: 12px;
            font-weight: normal;
            text-align: center;
            vertical-align: middle;
            height: 20px;
        }
        th
        {
            background-color: Gray;
        }       
       
        .hover
        {
            background-color: #cccc00;
        }
       
        .odd
        {
            background-color: #bbf;
        }
       
        .even
        {
            background-color:#ffc;
        }
    </style>
</head>
<body>
    <table id="table1">
        <tr>
            <th colspan="5" style="width: 800px;">
                鼠标移动到行变色
            </th>
        </tr>
        <tr>
            <td>
                第一行第一列
            </td>
            <td>
                第一行第二列
            </td>
            <td>
                第一行第三列
            </td>
            <td>
                第一行第四列
            </td>
            <td>
                第一行第五列
            </td>
        </tr>
        <tr>
            <td>
                第二行第一列
            </td>
            <td>
                第二行第二列
            </td>
            <td>
                第二行第三列
            </td>
            <td>
                第二行第四列
            </td>
            <td>
                第二行第五列
            </td>
        </tr>
        <tr>
            <td>
                第三行第一列
            </td>
            <td>
                第三行第二列
            </td>
            <td>
                第三行第三列
            </td>
            <td>
                第三行第四列
            </td>
            <td>
                第三行第五列
            </td>
        </tr>
        <tr>
            <td>
                第四行第一列
            </td>
            <td>
                第四行第二列
            </td>
            <td>
                第四行第三列
            </td>
            <td>
                第四行第四列
            </td>
            <td>
                第四行第五列
            </td>
        </tr>
    </table>
    <br />
    <table id="table2">
        <tr>
            <th colspan="5" style="width: 800px;">
                表格奇偶行变色
            </th>
        </tr>
        <tbody>
            <tr>
                <td>
                    第一行第一列
                </td>
                <td>
                    第一行第二列
                </td>
                <td>
                    第一行第三列
                </td>
                <td>
                    第一行第四列
                </td>
                <td>
                    第一行第五列
                </td>
            </tr>
            <tr>
                <td>
                    第二行第一列
                </td>
                <td>
                    第二行第二列
                </td>
                <td>
                    第二行第三列
                </td>
                <td>
                    第二行第四列
                </td>
                <td>
                    第二行第五列
                </td>
            </tr>
            <tr>
                <td>
                    第三行第一列
                </td>
                <td>
                    第三行第二列
                </td>
                <td>
                    第三行第三列
                </td>
                <td>
                    第三行第四列
                </td>
                <td>
                    第三行第五列
                </td>
            </tr>
        </tbody>
    </table>
    <br />
    <table id="table3">
        <tr>
            <th style="width: 160px;">
                表头一
            </th>
            <th style="width:160px; display;">
                表头二
            </th>
            <th style="width: 160px;">
                表头三
            </th>
            <th style="width: 160px;">
                表头四
            </th>
            <th style="width: 160px;">
                表头五
            </th>
        </tr>
            <tr>
                <td>
                    第一行第一列
                </td>
                <td>
                    第一行第二列
                </td>
                <td>
                    第一行第三列
                </td>
                <td>
                    第一行第四列
                </td>
                <td>
                    第一行第五列
                </td>
            </tr>
            <tr>
                <td>
                    第二行第一列
                </td>
                <td >
                    第二行第二列
                </td>
                <td>
                    第二行第三列
                </td>
                <td>
                    第二行第四列
                </td>
                <td>
                    第二行第五列</td>
            </tr>
            <tr>
                <td>
                    第三行第一列
                </td>
                <td>
                    第三行第二列
                </td>
                <td>
                    第三行第三列
                </td>
                <td>
                    第三行第四列
                </td>
                <td>
                    第三行第五列
                </td>
            </tr>
    </table>

    <table id="tctrl">
        <tr>
            <th colspan="5" style="width: 800px;">
                对上面表格进行控制操作
            </th>
        </tr>
        <tr>
            <td style="width: 160px">
                <input id="btn1" type="button" value="http://www.mamicode.com/删除第二行" />
            </td>
            <td style="width: 160px">
                <input id="btn2" type="button" value="http://www.mamicode.com/删除第二列" />
            </td>
            <td style="width: 160px">
                <input id="btn3" type="button" value="http://www.mamicode.com/删除第二行外的所有行" /></td>
            <td style="width: 160px">
                <input id="btn4" type="button" value="http://www.mamicode.com/删除第二列外的所有列" /></td>
            <td style="width: 160px">
                <input id="btn5" type="button" value="http://www.mamicode.com/隐藏第二行" /></td>
        </tr>       
        <tr>
            <td style="width: 160px">
                <input id="btn6" type="button" value="http://www.mamicode.com/隐藏第二列" /></td>
            <td style="width: 160px">
                <input id="btn7" type="button" value="http://www.mamicode.com/插入行最后" /></td>
            <td style="width: 160px">
                <input id="btn8" type="button" value="http://www.mamicode.com/在第二行后插入行" /></td>
            <td style="width: 160px">
                <input id="btn9" type="button" value="http://www.mamicode.com/获取2*3单元格值" /></td>
            <td style="width: 160px">
                <input id="btn10" type="button" value="http://www.mamicode.com/获取第二列所有值" /></td>
        </tr>       
        <tr>
            <td style="width: 160px">
                <input id="btn11" type="button" value="http://www.mamicode.com/获取第二行所有值" /></td>
            <td style="width: 160px">
                <input id="btn12" type="button" value="http://www.mamicode.com/横向合并单元格" /></td>
            <td style="width: 160px">
                <input id="btn13" type="button" value="http://www.mamicode.com/横向拆分单元格" /></td>
            <td style="width: 160px">
                <input id="btn14" type="button" value="http://www.mamicode.com/纵向合并单元格" /></td>
            <td style="width: 160px">
                <input id="btn15" type="button" value="http://www.mamicode.com/纵向拆分单元格" /></td>
        </tr>
    </table>
    <br />
    <table id="table4">
        <tr>
            <th style="width: 160px;">
                表头一<input id="colCkb1" type="checkbox" />
            </th>
            <th style="width:160px; display;">
                表头二<input id="colckb2" type="checkbox" />
            </th>
            <th style="width: 160px;">
                表头三<input id="colckb3" type="checkbox" />
            </th>
            <th style="width: 160px;">
                表头四<input id="colCkb4" type="checkbox" />
            </th>
            <th style="width: 160px;">
                <input id="ckbAll"  type="checkbox" />全选
            </th>
        </tr>
            <tr>
                <td>
                    第一行第一列
                </td>
                <td>
                    第一行第二列
                </td>
                <td>
                    第一行第三列
                </td>
                <td>
                    第一行第四列
                </td>
                <td>
                    <input id="ckb1" type="checkbox" /></td>
            </tr>
            <tr>
                <td>
                    第二行第一列
                </td>
                <td >
                    第二行第二列
                </td>
                <td>
                    第二行第三列
                </td>
                <td>
                    第二行第四列
                </td>
                <td>
                   <input id="ckb2" type="checkbox" /></td>
            </tr>
            <tr>
                <td>
                    第三行第一列
                </td>
                <td>
                    第三行第二列
                </td>
                <td>
                    第三行第三列
                </td>
                <td>
                    第三行第四列
                </td>
                <td>
                   <input id="ckb3" type="checkbox" /></td>
            </tr>
            <tr>
                <td>
                    第四行第一列
                </td>
                <td>
                    第四行第二列
                </td>
                <td>
                    第四行第三列
                </td>
                <td>
                    第四行第四列
                </td>
                <td>
                   <input id="ckb4" type="checkbox" /></td>
            </tr>
    </table>
</body>
</html>

操作表格