Jquery 控制增、减(行与列)

<!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>
Jquery 控制增、减(行与列)
</title>
    <script language="Javascript" src="jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<label>
<input type="button" name="button" id="button" value="加列" onclick="AddLie();" />
<input type="button" name="button" id="button" value="加行" onclick="AddHang();" />
<input type="button" name="button" id="button" value="减列" onclick="JianLie();" />
<input type="button" name="button" id="button" value="减行" onclick="JianHang();" />
<input type="button" name="button" id="button" value="kandaima" onclick="kandaima();" />
</label>
<table border="0" style="border-collapse:collapse">
<tr>
    <td><input name="Xname" type="text" id="Xname" size="10" value="数据标签" /></td>
    <td><input name="Series1" type="text" id="Series1" value="系列名1" size="10"/></td>
</tr>
<tr>
    <td><input name="Xname" type="text" id="Xname" size="10" value="标签1" /></td>
    <td><input name="Series1" type="text" id="Series1" size="10" value="数值1"/></td>
</tr>
</table>
<script type="text/javascript">
function JianHang()
{
$("tr:last").remove();
}
function JianLie()
{
$("tr td:last-child").remove();
}
function AddHang()
{
$("tr:first").clone().appendTo("table:first");
$("tr:last td input").val("");
}
function AddLie()
{
var Num=$("tr:first td").size();
$("tr").append("<td><input name=\"Series"+Num+"\" type=\"text\" id=\"Series"+Num+"\" size=\"10\"/></td>");
$("tr:first td:last input").val("系列名"+Num);
}
function kandaima()
{ alert($("table:first").html());
}
</script>
</body>
</html>
 

posted @ 2012-01-12 12:51  殇伈de錑婲  阅读(273)  评论(0编辑  收藏  举报