操作表格

<!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="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="删除第二行" />
            </td>
            <td style="width: 160px">
                <input id="btn2" type="button" value="删除第二列" />
            </td>
            <td style="width: 160px">
                <input id="btn3" type="button" value="删除第二行外的所有行" /></td>
            <td style="width: 160px">
                <input id="btn4" type="button" value="删除第二列外的所有列" /></td>
            <td style="width: 160px">
                <input id="btn5" type="button" value="隐藏第二行" /></td>
        </tr>       
        <tr>
            <td style="width: 160px">
                <input id="btn6" type="button" value="隐藏第二列" /></td>
            <td style="width: 160px">
                <input id="btn7" type="button" value="插入行最后" /></td>
            <td style="width: 160px">
                <input id="btn8" type="button" value="在第二行后插入行" /></td>
            <td style="width: 160px">
                <input id="btn9" type="button" value="获取2*3单元格值" /></td>
            <td style="width: 160px">
                <input id="btn10" type="button" value="获取第二列所有值" /></td>
        </tr>       
        <tr>
            <td style="width: 160px">
                <input id="btn11" type="button" value="获取第二行所有值" /></td>
            <td style="width: 160px">
                <input id="btn12" type="button" value="横向合并单元格" /></td>
            <td style="width: 160px">
                <input id="btn13" type="button" value="横向拆分单元格" /></td>
            <td style="width: 160px">
                <input id="btn14" type="button" value="纵向合并单元格" /></td>
            <td style="width: 160px">
                <input id="btn15" type="button" value="纵向拆分单元格" /></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>

时间： 2024-10-11 19:14:48

操作表格的相关文章

DOM操作表格

前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码.本文将详细介绍DOM操作表格的属性和方法 需求 要通过DOM实现下列格式的表格结构 <table border = "1" width = "100%">     <tbody>         <tr>           

19.DOM操作表格及样式

DOM操作表格及样式 学习要点:1.操作表格2.操作样式 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一.操作表格<table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作table<table border = "1

轻松学习JavaScript二十三：DOM编程学习之操作表格

一使用HTML标签创建表格: 代码: <span style="font-size:18px;"><table border="1px"width="300px"> <caption>人员表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th>

JavaScript学习9：DOM操作表格及样式

DOM在操作生成HTML上,还是比较简单明了的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.那本文今天就来了解一下DOM如何操作表格和样式. 一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它. 下面我们就使用DOM来创建一个表格: <span style="font-size:18px;">window.onload=function(){ var table

DOM / DOM操作表格

DOM [获取层次节点的常用属性] 1 .childNodes:(数组)获取UL里面的所有子节点(包含元素节点/文本节点): 2 .firstChild:获取元素的第一个子节点: 3 .lastChild: 获取元素的最后一个子节点: 4 .ownerDocument:获取当前文档根节点.在HTML文档中,为document节点: 5 .parentNode: 获取当前节点的父节点: 6 .previousSibling:获取当前节点的前一个兄弟节点: 7 .nextSibling: 获取当前节

DOM系列---DOM操作表格

DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一．操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). html代码部分: //需要操作的table 1 <table border="1" width="300&

jQuery操作表格，table tr td，单元格

jQuery操作表格,table tr td,单元格 乔乐共享jQuerytable单元格表格 最终效果图:  .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } <table id="tbl_count"> <caption>2013春节聚会收支统计</caption> <tr> <th>

第21章 DOM操作表格及样式

学习要点: 1.操作表格 2.操作样式 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作它.(PS:HTML DOM提供了更加方便快捷的方式来操作HTML,有手册). //需要操作的table <table border="1" w

动态操作表格行(兼容IE、火狐)

<!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-Typ

JavaScript--DOM操作表格及样式(21)

一 操作表格 // <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; 1 // 使用DOM来创建表格; 2 var table = document.createElement('table'); 3 table.border = 1; 4 table.width = 300; 5 6 var caption = document.createElement('caption'); 7 table.appendChild(capti