一个可增删的表格，jquery 自引。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个可增加删除的表格</title>
<script type="text/javascript" src="__PUBLIC__/frontend/sp/js/jquery-1.8.3.min.js"></script>
<script src="jquery.min.js"></script>
</head>
<style>
.dabox {
80%;
margin: 0 auto;
}
.title{
100%;
text-align:center;
font-size:24px;
margin-bottom:15px;
}
table {
margin: 0 auto;
100%;
}
table td {
background: #FFF;
padding: 8px 8px;
text-align: center;
}
.delebtn{
60px;
height: 25px;
text-align: center;
line-height: 25px;
font-size: 16px;
color: #64b6ee;
background: #fff;
border: 1px solid #64b6ee;
cursor: pointer;
display: block;
border-radius: 5px;
margin:0 auto;
}
.submit {
400px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #fff;
background: #64b6ee;
margin: 40px auto 20px;
border: none;
display: block;
border-radius: 5px;
}
.add{
250px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
color: #64b6ee;
background: #fff;
border: 1px solid #64b6ee;
margin: 40px auto 20px;
display: block;
border-radius: 5px;
outline: none;
cursor: pointer;
}
.add:active{
background: rgba(100,182,283,0.2) ;
-webkit-tap-highlight-color:transparent;
}
</style>
<body>
<div class="dabox">
<div style="height:80px;"></div>
<div class="title">一个可增加删除的表格</div>
<form action="" method="">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>一号</td>
<td>二号</td>
<td>三号</td>
<td>四号</td>
<td>五号</td>
<td>删除</td>
</tr>
<tr>
<td> <input type="text" value="嘿嘿" name="yiname[]"> </td>
<td> <input type="text" value="嘿嘿" name="ername[]"> </td>
<td> <input type="text" value="嘿嘿" name="sanname[]"> </td>
<td> <input type="text" value="嘿嘿" name="siname[]"> </td>
<td> <input type="text" value="嘿嘿" name="wuname[]"> </td>
<td> <div class="delebtn" onclick="dele(this)">删除</div> </td>
</tr>
<tr>
<td> <input type="text" value="嘿嘿" name="yiname[]"> </td>
<td> <input type="text" value="嘿嘿" name="ername[]"> </td>
<td> <input type="text" value="嘿嘿" name="sanname[]"> </td>
<td> <input type="text" value="嘿嘿" name="siname[]"> </td>
<td> <input type="text" value="嘿嘿" name="wuname[]"> </td>
<td> <div class="delebtn" onclick="dele(this)">删除</div> </td>
</tr>
<tr class="btInfo">
<td colspan="5">哈哈</td>
</tr>
</table>
<input type="submit" value="提交" class="submit">
<input type="button" value="添加" class="add" onclick="addList()">
</form>
<div style="height:80px;"></div>
</div>
</body>
</html>
<script>
// 添加事件
function addList(){
var addhtml=`<tr>
<td> <input type="text" value="嘿嘿" name="yiname[]"> </td>
<td> <input type="text" value="嘿嘿" name="ername[]"> </td>
<td> <input type="text" value="嘿嘿" name="sanname[]"> </td>
<td> <input type="text" value="嘿嘿" name="siname[]"> </td>
<td> <input type="text" value="嘿嘿" name="wuname[]"> </td>
<td> <div class="delebtn" onclick="dele(this)">删除</div> </td>
</tr>`;
// var addhtml=' <tr>
' +
// ' <td><input type="text" value="" name="yiname[]"></td>
' +
// ' <td><input type="text" value="" name="ername[]"></td>
' +
// ' <td><input type="text" value="" name="sanname[]"></td>
' +
// ' <td><input type="text" value="" name="siname[]"></td>
' +
// ' <td><input type="text" value="" name="wuname[]"></td>
' +
// ' <td class="dele"><div class="delebtn" onclick="dele(this)">删除</div></td>
' +
// ' </tr>';
$('.btInfo').before(addhtml);
}
// 删除事件
function dele(obj) {
$(obj).parents("tr").remove();
}
</script>