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

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

我尝试使用index为替换行插入新行。

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

Answer 2

提供ID：<td> <label>名称</label><input type="text" class="clear" id="name"/></td> <td><label>地址</label><input type="text" class="clear" id="addr"/></td> <input type="button" value="add" id="add"/>

将此代码添加到javascript：

$("#add").live("click",function(){
   var num=$(".clear").val();
   var name=$("#name").val();
    var addr=$("#addr").val();
    $('#tab').append('<tr><td>'+num+'</td><td>'+name+'</td><td>'+addr+'</td><td><input type="button" value="add student" id="button1" class="butnEvn"/></td></tr>');

$(".clear").val('');
});

Answer 3

为文本框添加ID并尝试以下代码

$( document ).ready(function() {
        var slNo;
        $(".butnEvn").on( "click", function(){  
            slNo=$(this).parents("tr");         
        });
        $("#buttonAwd").on("click",function(){          
                $("#hidn").hide();      
        });

    $("#add").on( "click", function(){      
        var address=$("#address").val();
        var name=$("#name").val();
        var slno=$("#slno").val();
        var html='<tr><td>'+slno+'</td><td>'+name+'</td><td>'+address+'</td><td><input type="button" value="add student"  class="butnEvn"/></td></tr>';     
        if(slNo==undefined){            
            $("#tab").append(html);
        }
        else{
        $(html).insertAfter(slNo);
        }
    });
});

在两行之间的div中插入表

3 个答案: