jquery - 在两行之间的 div 内插入表格

Question

<div >
<table id="hidn">
   <tr>
       <td><label>Sl no.</label><input type="text" class="clear"/></td>
       <td> <label>name</label><input type="text" class="clear"/></td>
       <td><label>address</label><input type="text" class="clear"/></td>
   </tr>
 </table>
 <input type="button" value="add"/>
    <input type="button" id="buttonAwd" value="close"/>

<div>
<table id="tab" border="1">
<tr>
    <td>sl no.</td>
    <td>College</td>
    <td>address</td>
    <td></td>
</tr>
<tr>
    <td>1</td>
    <td>NIT</td>
    <td>tripura</td>
    <td><input type="button" value="add student" id="button1" class="butnEvn"/>
    </td>
 </tr>
 <tr>
    <td>2</td>
    <td>NIIT</td>
    <td>delhi</td>
    <td><input type="button" value="add student" class="butnEvn" id="button3"/>
    </td>
 </tr>
    </table>

$(document).ready(function(){
$(".butnEvn").live( "click", function(){

  $("#hidn").slideDown("slow");
});

$("#buttonAwd").live( "click", function(){
$("#hidn").slideUp("slow",function(){
$(".clear").val('');
});
});
});

fiddle http://jsfiddle.net/rQZX7/12/检查此链接。我想动态地将文本框值添加到 div 中，并将其放置在主表的每个表行之后，可以切换和查看。请为我找到解决方案。

我尝试使用索引插入新行作为替代行。

Answer 1

我已在您的标签中添加了一些 ID。使用此代码将数据附加到表

$("#addToTable").click(function () {
    $("#tab")
        .append("<tr><td>" + $("#txtSl").val() + "</td><td>" + $("#txtname").val() + "</td>  <td>" + $("#txtAddr").val() + "</td><td>" + "<input type='button' value='add student'  class='butnEvn'/></td></tr>");
});

Demo

编辑

var obj;
$(document).ready(function () {
    $(".butnEvn").live("click", function () {
        obj = this;
        $("#hidn").slideDown("slow");
    });

    $("#buttonAwd").live("click", function () {
        $("#hidn").slideUp("slow", function () {
            $(".clear").val('');
        });
    });
});

$("#addToTable").click(function () {
    $(obj)
        .parent()
        .parent()
        .after("<tr><td>" + $("#txtSl").val() + "</td><td>" + $("#txtname").val() + "</td><td>" + $("#txtAddr").val() + "</td><td>" + "<input type='button'   value='add student'  class='butnEvn'/></td></tr>");
});

Updated Fiddle