<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
.gridtable {
margin-top:5px;
width:100%;
font-family: verdana,arial,sans-serif;
font-size:12px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
.gridtable td {
border-width: 1px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
text-align:center;
}
.gridtable td input{
width:95%;
height:30px;
}
.gridtable td textarea{
width:95%;
height:30px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$(".add").click(function(){
var count = $('table').size();
var a = $("form.Form table:first-child").clone();
var table = $(a).attr("id","table"+count.toString());
$("form.Form").append(table);
var table_id = "table"+count.toString()
var a = table_id + " input[class='btn_add']"
var b = table_id + " input[class='btn_del']"
$("#"+a+"").attr("id","btn_add"+count.toString());
var btn_add =$("#"+a+"").attr("id");
$("#"+b+"").attr("id","btn_del"+count.toString());
var btn_del = $("#"+b+"").attr("id");
$("#"+btn_add+"").click(function(){
var s = table_id +" tr";
var c = table_id + " tr:last-child";
var d = table_id + " td[rowspan]";
var f = table_id + " input[name=num_tr]";
var num_tr = $("#"+s+"").length;
if(num_tr<7){
var tr = $("#"+c+"").clone(); //clone one tr
$(tr).children("td:eq(0)").children("select").attr("name","name_"+(num_tr-1).toString()); //name
$(tr).children("td:eq(1)").children("input").attr("name","ip_"+(num_tr-1).toString()); //ip
$(tr).children("td:eq(2)").children("input").attr("name","backup_"+(num_tr-1).toString()); //backup
$("#"+table_id+"").append(tr);
count = $("#"+d+"").attr('rowspan');
$("#"+d+"").attr('rowspan',parseInt(count)+1);
$("#"+f+"").val(num_tr-1);
}
});
$("#"+btn_del+"").click(function(){
var s = table_id +" tr"
var e = table_id + " tr:last-child";
var f = table_id + " input[name=num_tr]";
var d = table_id + " td[rowspan]";
if($("#"+s+"").length>3){
$("#"+e+"").remove();
count = $("#"+d+"").attr('rowspan');
$("#"+d+"").attr('rowspan',parseInt(count)-1);
num_tr = $("#"+f+"").val();
$("#"+f+"").val(num_tr-1);
}
});
});
$(".remove").click(function(){
if($("form.Form table").length>1){
$("form.Form table:last-child").remove();}
});
$("#btn_add0").click(function(){
var num_tr = $("#table0 tr").length;
if(num_tr<7){ //the max num of tr
var tr=$("#table0 tr:last-child").clone();
$(tr).children("td:eq(0)").children("select").attr("name","name_"+(num_tr-1).toString()); //name
$(tr).children("td:eq(1)").children("input").attr("name","ip_"+(num_tr-1).toString()); //ip
$(tr).children("td:eq(2)").children("input").attr("name","backup_"+(num_tr-1).toString()); //backup
$("#table0").append(tr);
count = $("#table0 td[rowspan]").attr('rowspan');
$("#table0 td[rowspan]").attr('rowspan',parseInt(count)+1);}
$("#table0 input[name=num_tr]").val(num_tr-1);
});
$("#btn_del0").click(function(){
if($("#table0 tr").length>3){
$("#table0 tr:last-child").remove();
count = $("#table0 td[rowspan]").attr('rowspan');
$("#table0 td[rowspan]").attr('rowspan',parseInt(count)-1);
num_tr = $("#table0 input[name=num_tr]").val();
$("#table0 input[name=num_tr]").val(num_tr-1);
}
});
});
</script>
<!-- 内容 -->
<div class="Css">
<div id="Content">
<form id="Form" class="Form" method="POST" action="." style="margin-bottom:0px;">
<table class="gridtable" id="table0">
<tr>
<td></td>
<td>name</td>
<td>area</td>
<td>num</td>
<td>URL</td>
</tr>
<tr>
<td rowspan="2"><input type="button" class="btn_del" id="btn_del0" value="-"/><input type="button" class="btn_add" id="btn_add0" value="+"/></td>
<td rowspan="2"><input maxlength="255" name="domain" type="url"><input name="num_tr" type="hidden" value="2"></td>
<td><select name="name_0">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select></td>
<td><input name="ip_0" type="text" maxlength="15"></td>
<td rowspan="2"><textarea name="testurl" style="height:60px;">www.baidu.com</textarea></td>
</tr>
<tr>
<td><select name="name_1">
<option value="0">0</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select></td>
<td><input name="ip_1" type="text" maxlength="15" ></td>
</tr>
</table>
</form>
</div>
<button class="remove" style="float:left;">删除表</button>
<button class="add" style="float:left;">增加表</button>
<br><br>
<br>
<p width="50%" style="text-align:center;">
<input id="Submit" class="button" type="button" value="提交" onclick="">
</p>
</div>
</div>
</body>
</html>
jQuery动态增加表格,增加行,并添加ID
猜你喜欢
转载自blog.csdn.net/farmwang/article/details/82662368
今日推荐
周排行