Just wanted your help. The code you have given on the beginning for adding and removing rows really helped me a lot. but still i need some help since i am new to jquery.
I have a UI and on which i have to click on link and that should bring up a dialog box and that dialog box should contain all those add and remove functionality and then i have to submit the form. Submitting the form is ok but i am unable to click the link and load the contents to the dialog box.
Pullo,
Thanks for your reply. Finally today I solved my issue. I am looking into the other phase of the code. Will ask for your help if I face any issue.
$("table.dynamictbl button.add").click(function() {
id++;
var temp = $(this).parents("table.dynamictbl");
// Get a new row based on the prototype row
var prot = temp.find(".prototype").clone();
prot.attr("class", "");
prot.find(".id").attr("value", id);
temp.find("tbody").append(prot);
});
$("table.dynamictbl button.remove").live("click", function() {
$(this).parents("tr").remove();
});
});
</script>
</head>
<body>
<table class="dynamictbl" border="1">
<thead>
<tr>
<th>KEY</th>
<th>VALUE</th>
<th><button class="add">Add</button></th>
</tr>
</thead>
<tbody>
<tr class="prototype">
<td><input type="text" name="key[]" value="" /></td>
<td><input type="text" name="value[]" value="" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
</table>
</body>
</html>
my question is now i want to save the data entered in the table. And since this is a dynamic table i need to go through each row in order to save the data of each row.
Can you tell me how to read each row to save the data entered ?
Hi,
I want to send those value to server side. so it will be a post data.
Also i am seeing that after entering any value on the key and value column (code given above), if i click on the add button, its creating a new row but also its coping the contents of the previous row. it should copy the row only not the contents. Can you send me some suggestions on that ?
What I would do then, is have a button (“Save” or something), that when you click on it, grabs all of the data out of the table and stores it in an JSON object.
Once you have done this, you can pass the JSON object via AJAX to your server-side script.
I fixed this for you.
I also updated the script to run with the latest 1.x jQuery.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Add/remove table row</title>
</head>
<body>
<table class="dynamictbl" border="1">
<thead>
<tr>
<th>KEY</th>
<th>VALUE</th>
<th><button class="add">Add</button></th>
</tr>
</thead>
<tbody>
<tr class="prototype">
<td class="row1"><input type="text" name="key[]" value="" /></td>
<td class="row2"><input type="text" name="value[]" value="" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
</table>
<button id="save">Save contents</button>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var id = 0;
$("table.dynamictbl button.add").click(function() {
id++;
var temp = $(this).parents("table.dynamictbl");
// Get a new row based on the prototype row
var prot = temp.find(".prototype").clone();
$(prot[0]).find("input").val("");
prot.attr("class", "");
prot.find(".id").attr("value", id);
temp.find("tbody").append(prot);
});
$(document.body).on("click", "table.dynamictbl button.remove", function() {
$(this).parents("tr").remove();
});
$("#save").click(function(){
var $rows = $("table.dynamictbl > tbody > tr");
var data = {};
$rows.each(function(index){
var r1 = $(this).find(".row1 > input[type=text]").val();
var r2 = $(this).find(".row2 > input[type=text]").val();
data[index]= {"key" : r1, "value" : r2};
});
// Do your AJAX Magic here
console.log(JSON.stringify(data));
})
</script>
</body>
</html>
my question: is there any way to ignore these values “0”: “1”: and “2”:
because when i am sending it to server side as a list, these values ( “0”: “1”: and “2”: ) are getting added to the list and causing failure in the post method.
Thanks pullo…
Now the problem is when i am adding data.push instead of data[index]. its populating only the values present on the first row. it is not adding the successive rows value into the list.
yes this changes are working.
but can we get separate names and value for each row. so that it will be easy to update those data in database and get those data again to table to modify.
By using above code i am able to insert all those values into database successfully.
On my UI, i have two parts
Add personal details of a person along with the data present in the dynamic table.
search of a person and modify data along with the values present in the table.
i am able to insert data into database.
Also i am able to get a string of data inserted in database back to UI but unable to populate those values into the table rows.
sending data into database in the below format:
{“keyvaluedata”:[{“keyname0”:“url”,“keyvaue0”:“sampleurl”},{“keyname1”:“sleeptime”,“keyvaue1”:“3”}, {“keyname2”:“browser”,“keyvaue2”:“firefox”}, {“keyname3”:“surname”,“keyvaue3”:“sa”}…]
getting a string of inserted data from database for the dynamic table in the format:
keyvaluedata :{“url”:“sampleurl”,“sleeptime”:“3”,“browser”:“firefox”,“surname”:“sa”,…}
Now the difficulty is to populate again these keyname and keyvalues into the dynamic table.
Can you give some suggestions ?
