Multi tool use

insert table inside div between two rows

<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/ check this link. I want to dynamically add that textbox values inside a div and place after each table row of main table which can be toggle and viewed. Please find a solution for me.

I have tried with index to insert new row for alternative row.

3 Answers
3

I have added some id's to your tags. Use this code to append the data to table

$("#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

Edit

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

Give id : <td> <label>name</label><input type="text" class="clear" id="name"/></td>
<td><label>address</label><input type="text" class="clear" id="addr"/></td>
<input type="button" value="add" id="add"/>

<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"/>

Add this code into 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('');
});


Add ids for the textboxes and try the following code

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.