![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!doctype html> <html lang="en"> <head> <title>jquery里操作table相关的各种方法在线演示-aijQuery.cn</title> <script src="/static/jquery-3.1.1.min.js"></script> <style type="text/css"> .on {background-color:#ddd} </style> </head> <body style="text-align:center"><div class="m-1"></div> <h3>jquery操作table的各种方法</h3><div class="m-2"></div> <table id="aijquery" border="1" cellpadding="7" cellspacing="0" align="center"> <tr><td>测试1.1</td><td>测试1.2</td><td>测试1.3</td><td>测试1.4</td><td>测试1.5</td><td>测试1.6</td></tr> <tr><td>测试2.1</td><td>测试2.2</td><td>测试2.3</td><td>测试2.4</td><td>测试2.5</td><td>测试2.6</td></tr> <tr><td>测试3.1</td><td>测试3.2</td><td>测试3.3</td><td>测试3.4</td><td>测试3.5</td><td>测试3.6</td></tr> <tr><td>测试4.1</td><td>测试4.2</td><td>测试4.3</td><td>测试4.4</td><td>测试4.5</td><td>测试4.6</td></tr> <tr><td>测试5.1</td><td>测试5.2</td><td>测试5.3</td><td>测试5.4</td><td>测试5.5</td><td>测试5.6</td></tr> </table><div class="m-2"></div> <button id="huanse">鼠标经过时换色</button> <button id="jiou">奇偶行不同颜色</button> <button id="addtr">插入一行</button> <button id="addtd">插入一列</button><div class="m-1"></div> <button id="hidetr">隐藏/显示第三行</button> <button id="hidetd">隐藏/显示第三列</button> <div class="m-1"></div> <button id="deltr">删除第四行</button> <button id="deltd">删除第五列</button> <button id="deltrt">删除第二行外所有行</button> <button id="deltrd">删除第2到第4行</button> <div class="m-1"></div> <button id="deltrs">只留前三行</button> <button id="deltrf">只留第二到第四行</button> <div class="m-1"></div> <button id="readtd">读取第三行第四列的值</button> <button id="readtdt">读取第三列所有值</button> <button id="readtr">读取第三行所有值</button> <script language="javascript"> //鼠标经过换色 $("#huanse").on("click",function(){ $("#aijquery tr").hover(function(){$(this).children("td").addClass("on");},function(){$(this).children("td").removeClass("