jquery动态操作table
2010-10-27 11:44
471 查看
<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
</style>
<script src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("table").append("<tr align='center'>"+
"<td height='25'> 1</td>"+
"<td width='141'> 2</td>"+
"<td width='60'> 3</td>"+
"<td width='60'> 4</td>"+
"<td width='248' colspan='3'>5 </td>"+
"<td width='163'> 6</td>"+
"</tr>")
});
$("#delete").click(function(){
if($("table tr:gt(0)").html() != null){
$("table tr:last").remove();
}
});
});
</script>
</head>
<body>
<table width="100%" border="1" bordercolor="#000000" cellpadding="1">
<tr align="center">
<td width="136" height="25"> </td>
<td colspan="7"> </td>
</tr>
<tr align="center">
<td height="25"> 1</td>
<td width="141"> 2</td>
<td width="60"> 3</td>
<td width="60"> 4</td>
<td width="248" colspan="3">5 </td>
<td width="163"> 6</td>
</tr>
</table>
<input type="button" id="add" value="增加一行" />
<input type="button" id="delete" value="减少一行" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
</style>
<script src="jquery-1.3.2.js"></script>
<script>
$(document).ready(function(){
$("#add").click(function(){
$("table").append("<tr align='center'>"+
"<td height='25'> 1</td>"+
"<td width='141'> 2</td>"+
"<td width='60'> 3</td>"+
"<td width='60'> 4</td>"+
"<td width='248' colspan='3'>5 </td>"+
"<td width='163'> 6</td>"+
"</tr>")
});
$("#delete").click(function(){
if($("table tr:gt(0)").html() != null){
$("table tr:last").remove();
}
});
});
</script>
</head>
<body>
<table width="100%" border="1" bordercolor="#000000" cellpadding="1">
<tr align="center">
<td width="136" height="25"> </td>
<td colspan="7"> </td>
</tr>
<tr align="center">
<td height="25"> 1</td>
<td width="141"> 2</td>
<td width="60"> 3</td>
<td width="60"> 4</td>
<td width="248" colspan="3">5 </td>
<td width="163"> 6</td>
</tr>
</table>
<input type="button" id="add" value="增加一行" />
<input type="button" id="delete" value="减少一行" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery之动态操作table
- jquery实现动态操作table
- JQuery操作动态操作Table
- Jquery动态操作table表格
- 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
- jQuery Table 系列: Jquery Table 的基本操作
- 汇总常用的jQuery操作Table tr td方法
- jQuery实现动态给table赋值的方法示例
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- jquery对table表格的常用操作
- jQuery遍历table并操作元素
- jquery 对table的一些操作 怎么获取tr下的第二个td元素？
- JQuery操作Table元素
- jquery操作table
- jquery动态操作控件,选择器接收变量
- jQuery 對table的基本操作
- jQuery操作表格（table）的常用方法、技巧汇总
- jQuery操作Table学习总结
- jQuery为table表格动态添加或删除tr