用js实现点击按钮在html中增加一行内容,问题见详细!
就是点击增加按钮在这一行下面添加一行相同的内容。<tr><tdclass="tableleft">标题</td><td><inputname="title"type="t...
就是点击增加按钮在这一行下面添加一行相同的内容。
<tr> <td class="tableleft">标题</td> <td> <input name="title" type="text" id="title" style="width:150px;vertical-align:middle;" maxlength="40" > <lable>文件名</lable> <input name="filename" type="text" id="filename" style="width:150px;vertical-align:middle;" maxlength="40" > <lable>时间</lable> <input name="time" type="text" id="time" style="width:150px;vertical-align:middle;" maxlength="40" onClick="WdatePicker()"> <lable>内容简介</lable> <input name="content" type="text" id="content" style="width:300px;vertical-align:middle;" maxlength="50" > <input type="button" class="btn btn-success" value="增加" id="addTable"/> <input type="button" class="btn btn-success" value="删除" id="deleteTable"/> </td> </tr> 展开
<tr> <td class="tableleft">标题</td> <td> <input name="title" type="text" id="title" style="width:150px;vertical-align:middle;" maxlength="40" > <lable>文件名</lable> <input name="filename" type="text" id="filename" style="width:150px;vertical-align:middle;" maxlength="40" > <lable>时间</lable> <input name="time" type="text" id="time" style="width:150px;vertical-align:middle;" maxlength="40" onClick="WdatePicker()"> <lable>内容简介</lable> <input name="content" type="text" id="content" style="width:300px;vertical-align:middle;" maxlength="50" > <input type="button" class="btn btn-success" value="增加" id="addTable"/> <input type="button" class="btn btn-success" value="删除" id="deleteTable"/> </td> </tr> 展开
展开全部
<tr>
<td class="tableleft">标题</td>
<td>
<input name="title" type="text" id="title" style="width:150px;vertical-align:middle;" maxlength="40" >
<lable>文件名</lable>
<input name="filename" type="text" id="filename" style="width:150px;vertical-align:middle;" maxlength="40" >
<lable>时间</lable>
<input name="time" type="text" id="time" style="width:150px;vertical-align:middle;" maxlength="40" onClick="WdatePicker()">
<lable>内容简介</lable>
<input name="content" type="text" id="content" style="width:300px;vertical-align:middle;" maxlength="50" >
<input type="button" class="btn btn-success" value="增加" id="addTable" onclick="add_tr(this)"/>
<input type="button" class="btn btn-success" value="删除" id="deleteTable"/>
</td>
</tr>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function add_tr(obj) {
var tr = $(obj).parent().parent();
tr.after(tr.clone());
}
</script>
追问
好使了,麻烦大神能帮忙弄下删除么?我会额外给分的谢谢啦!!
追答
function del_tr(obj) {
$(obj).parent().parent().remove();
}
展开全部
<!--首先 加载jQuery-->
<!-- 路径换成自己的路径-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!--创建一个点击按钮-->
<button class="button" onclick="addrow();">添加一行</button>
<!--创建一个表格-->
<table class="table">
<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
</table>
<!--创建添加行函数-->
<script type="text/javascript">
function addrow(){
var tables = $('.table');
var addtr = $("<tr>"+
"<td><input type='text' name='name' /></td>"+
"<td><input type='text' name='age' /></td>"+
"<td><input type='text' name='sex' /></td>"+
"<td><span onclick='deleteTrRow(this);'> 删除</span></td>"+
"</tr>");
addtr.appendTo(tables);
}
deleteTrRow = function(tr) {
//多一个parent就代表向前一个标签,
//本删除范围为<td><tr>两个标签,即向前两个parent
//如果多一个parent就会删除整个table
$(tr).parent().parent().remove();
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询