jQuery表格Table基本操作详解

Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。

首先建立一个通用的表格css 和一个 表格Table：

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;
 }

<table>
    <tr>
      <th style="width: 160px;">表头一</th>
      <th style="width: 160px;">表头二 </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>
    <tr>
      <td>第四行第一列</td>
      <td>第四行第二列</td>
      <td>第四行第三列</td>
      <td>第四行第四列</td>
      <td>第四行第五列</td>
    </tr>
</table>

一、鼠标移动到行更换背景色：

增加一个css样式：

.hover
{
 background-color: #cccc00;
}

Js脚本：

结果执行结果：

二、 表格奇偶行变色 ：

奇数行和偶数行css：

.odd{ background-color: #bbf;}
.even{ background-color:#ffc; }

Js脚本：

结果显示：

三、基本操作：

(1)删除行，比如删除表格中的第二行：

(2)删除列，比如删除表格中的第二列：

(3)删除其它行，比如第二行之外的所有行：

(4)删除其它列，比如第二列之外的所有列：

(5)隐藏行，比如隐藏第二行：

(6)隐藏列，比如隐藏第二列：

(7)插入新行，在表格最后的位置：

(8)插入行，在第二行之后插入：

(9)获得单元格的值，比如第二行第三列：

(10)获取一列的所有值，比如第二列：

(11)获取一行的所有值，比如第二行：

(12)合并行单元格 比如合并 第二行第二个和第三个单元格：

(13)拆分行单元格将上面合并的单元格还原：

(14)合并列单元格，比如合并第二列第二个单元格和第三个单元格

(15)拆分列单元格，比如将上面刚合并的单元格还原：

(16)为每个单元格增加点击事件，并弹出该单元格行索引和列索引：

相关推荐：

jquery表格直接加载和延迟加载代码实例详解

再次分享18个非常棒的jQuery表格插件_jquery

jQuery表格行换色的三种实现方法_jquery

以上就是jQuery表格Table基本操作详解的详细内容，更多请关注Gxl网其它相关文章！