实现点击 图标动态增加一行或多行，删除一行或多行
问题描述：
<td colspan ="4">
<input class="w100" id="meetingdate1" name="meetingdate" type="text" validateGroup="{date:true}" />
<img src="<c:url value="/resources/images/calendar.gif"/>" />
</td>
这是一行文本框 点击后面的图片 实现动态增加一行或多行 删除一行或多行 各位大神帮帮忙用 jQuery怎么实现呀 代码怎么写呀
答
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
function del(self){
$(self).parents('tr').remove();
}
function add(self){
var tr = '<tr>'
+ '<td colspan ="4">'
+ '<input class="w100" id="meetingdate1" name="meetingdate" type="text" />'
+ '<img src=" " alt="删除" onclick="del(this)"/>'
+ '<img src=" " alt="增加" onclick="add(this)"/></td>'
+'</tr>';
$(self).parents('table').append(tr);
}
</script>
</head>
<body>
<table id='mytable'>
<tr>
<td colspan ="4">
<input class="w100" id="meetingdate1" name="meetingdate" type="text" />
<img src=" " alt='删除' onclick='del(this)'/>
<img src=" " alt='增加' onclick='add(this)'/></td>
</tr>
</table>
</body>
</html>
答
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " 删除";
des += "";
des += "";
$("#table").append(des);
}
function del(id) {
$("#tr" + id).remove();
//var num = $("#num").val();
//num--;
//$("#num").val(num);
//alert(num);
}
function addtr() {
var s = "";
var num = $("#num").val();
num++;
$("#num").val(num);
//alert(num);
var des = "
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " ";
des += "";
des += " ";
des += " 删除";
des += "";
des += "";
$("#table").append(des);
}
function del(id) {
$("#tr" + id).remove();
//var num = $("#num").val();
//num--;
//$("#num").val(num);
//alert(num);
}
之前写过的一个。 可以按照自己需要的样式拼接
答
<!DOCTYPE html>
|
|