用js实现点击按钮在html中增加一行内容，问题见详细！

Question

就是点击增加按钮在这一行下面添加一行相同的内容。
<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>

Answer 1

<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();
}

Answer 2

<!--首先 加载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);'>&nbsp;删除</span></td>"+
"</tr>");
      addtr.appendTo(tables);     
}
deleteTrRow = function(tr) {
//多一个parent就代表向前一个标签,

//本删除范围为<td><tr>两个标签,即向前两个parent

//如果多一个parent就会删除整个table

$(tr).parent().parent().remove();

}
</script>

Answer 3

是要在内容简介下面添加一行内容简介吗？追问

就是在增加相同的一行。

追答

标题

文件名

时间

内容简介

function add_tr(obj) {
var tr = obj.parentNode[0].parentNode[0];
tr.innerHTML=tr.innerHTML+tr.innerHTML;
}