jQuery增加与删除table列的方法

本文实例讲述了jQuery增加与删除table列的方法。分享给大家供大家参考，具体如下：
先来看看运行效果图：

完整代码如下：

<！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></title><script src="jquery-1.4.2.min.js" type="text/javascript"></script><script type="text/javascript"><！--function addCol（） {$th = $（"<th>增加的列头</th>"）;$col = $（"<td>增加的列</td>"）;$（"#tab1>thead>tr"）.append（$th）;$（"#tab1>tbody>tr"）.append（$col）;}function delCol（） {//移除最后一列$（"#tab1 tr :last-child"）.remove（）;//移除第一列//$（"#tab1 tr :first-child"）.remove（）;//移除指定的列, 注:这种索引从1开始//$（"#tab1 tr :nth-child（2）"）.remove（）;//移除第一列之外的列//$（"#tab1 tr :not（:nth-child（1））"）.remove（）;}// --></script></head><body><input id="Button1" type="button" onclick="addCol（）" value="增加列" /><input id="Button2" type="button" onclick="delCol（）" value="减少列" /><table id="tab1" border="1" style="width: 200px;"><thead><tr><th>Id</th><th>Name</th></tr></thead><tbody><tr><td>1</td><td>叶子</td></tr><tr><td>2</td><td>王子</td></tr></tbody></table></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。