您的位置：首页 > Web前端 > JQuery

Jquery表格行列操作

2016-11-25 12:38 260 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>JQuery</td>
<td>Jquery</td>
</tr>
<tr>
<td>JQuery</td>
<td>Jquery</td>
</tr>
</table>
<input type="button" name="button" id="button" value="加列" onclick="AddCol();"/>
<input type="button" name="button" id="button" value="加行" onclick="AddRow();"/>
<input type="button" name="button" id="button" value="减列" onclick="RemoveCol();"/>
<input type="button" name="button" id="button" value="减行" onclick="RemoveRow();"/>

<script type="text/JavaScript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
// 删除行
function RemoveRow()
{
// remove可以直接删除行或列
$("tr:last").remove();
}
//删除列
function RemoveCol()
{
$("tr td:last-child").remove();
}
// 增加行
function AddRow()
{
//调用clone函数复制要添加的行，再使用appendTo向表的尾部加入新的行
$("tr:first").clone().appendTo("table:first");
}
//增加列
function AddCol()
{
//append()函数增加列
$("tr").append("<td>JQuery</td>");
}
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航