<html>
<head>
<script type="text/javascript" src="table_script.js"></script>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td
id="name_row1">Ankit</td>
<td
id="country_row1">India</td>
<td
id="age_row1">20</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td
id="name_row2">Shawn</td>
<td
id="country_row2">Canada</td>
<td
id="age_row2">26</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td
id="name_row3">Rahul</td>
<td
id="country_row3">India</td>
<td
id="age_row3">19</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_name"></td>
<td><input type="text" id="new_country"></td>
<td><input type="text" id="new_age"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
<script>
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
var name =
document.getElementById("name_row" + no);
var country =
document.getElementById("country_row" + no);
var age =
document.getElementById("age_row"
+ no);
var name_data = name.innerHTML;
var country_data =
country.innerHTML;
var age_data = age.innerHTML;
name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";
country.innerHTML = "<input type='text' id='country_text" + no + "' value='" + country_data + "'>";
age.innerHTML = "<input type='text' id='age_text" + no + "' value='" + age_data + "'>";
}
function save_row(no) {
var name_val =
document.getElementById("name_text" + no).value;
var country_val =
document.getElementById("country_text" + no).value;
var age_val =
document.getElementById("age_text" + no).value;
document.getElementById("name_row" + no).innerHTML = name_val;
document.getElementById("country_row" + no).innerHTML = country_val;
document.getElementById("age_row" + no).innerHTML = age_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_name =
document.getElementById("new_name").value;
var new_country =
document.getElementById("new_country").value;
var new_age =
document.getElementById("new_age").value;
var table =
document.getElementById("data_table");
var table_len = (table.rows.length) - 1;
var row =
table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td
id='name_row"
+ table_len + "'>"
+ new_name + "</td><td id='country_row" + table_len + "'>" + new_country + "</td><td id='age_row" + table_len + "'>" + new_age + "</td><td><input
type='button' id='edit_button" + table_len + "' value='Edit' class='edit'
onclick='edit_row("
+ table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save'
class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete'
class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_name").value = "";
document.getElementById("new_country").value = "";
document.getElementById("new_age").value = "";
}
</script>
----------------------------------------------------------------------
Example 2:
<head>
<title>Create Elements Dynamically
using jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
</script>
</head>
<body>
<div id="main">
<input type="button" id="btAdd" value="Add Element" class="button" />
<input type="button" id="btRemove" value="Remove Element" class="button" />
<input type="button" id="btRemoveAll" value="Remove All" class="button" /><br />
</div>
</body>
<script>
$(document).ready(function () {
var iCnt = 0;
var container =
$(document.createElement('div')).css({
padding: '8px', margin: '20px', width: '180px', border: '1px solid',
borderTopColor: '#000', borderBottomColor: '#000',
borderLeftColor: '#000', borderRightColor: '#000'
});
$('#btAdd').click(function () {
if
(iCount <= 19) {
iCount = iCount + 1;
$(container).append('<input type=text
class="input" id=tb' + iCount + ' ' +
'value="Text Element ' + iCount + '" />');
if (iCount == 1) {
var divSubmit =
$(document.createElement('div'));
$(divSubmit).append('<input type=button
class="bt"'
+
'onclick="GetTextValue()"' +
'id=btSubmit value=Submit />');
}
$('#main').after(container,
divSubmit);
}
else
{
$(container).append('<label>Reached the
limit</label>');
$('#btAdd').attr('class', 'bt-disable');
$('#btAdd').attr('disabled', 'disabled');
}
});
$('#btRemove').click(function () {
if
(iCount != 0) { $('#tb'
+ iCount).remove(); iCount = iCount - 1; }
if
(iCount == 0) {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
}
});
$('#btRemoveAll').click(function () {
$(container)
.empty()
.remove();
$('#btSubmit').remove();
iCount = 0;
$('#btAdd')
.removeAttr('disabled')
.attr('class', 'bt');
});
});
var divValue, values = '';
function GetTextValue() {
$(divValue)
.empty()
.remove();
values = '';
$('.input').each(function () {
divValue =
$(document.createElement('div')).css({
padding: '5px', width: '200px'
});
values += this.value + '<br />'
});
$(divValue).append('<p><b>Your selected values</b></p>' + values);
$('body').append(divValue);
}
</script>
</html>
===============================================================
Example 3:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"
/>
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.del').live('click', function () {
$(this).parent().parent().remove();
});
$('.add').live('click', function () {
$(this).val('Delete');
$(this).attr('class', 'del');
var appendTxt = "<tr><td><input type='text' name='input_box_one[]'
/></td> <td><input type='text' name='input_box_two[]'
/></td> <td><input type='button' class='add' value='Add More'
/></td></tr>";
$("tr:last").after(appendTxt);
});
});
</script>
</head>
<body>
<table id="options-table">
<tr>
<td>Input-Box-One</td>
<td>Input-Box-Two</td>
<td> </td>
</tr>
<tr>
<td><input type="text" name="input_box_one[]" /></td>
<td><input type="text" name="input_box_two[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
</tr>
<tr>
<td><input type="text" name="input_box_one[]" /></td>
<td><input type="text" name="input_box_two[]" /></td>
<td><input type="button" class="add" value="Add More" /></td>
</tr>
</table>
</body>
</html>
=====================================================
Example 4:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamically Add/Remove Rows
In HTML Table Using JavaScript</title>
<script type="text/javascript">
function addRow(tableId) {
var
listValues =
[{ value: "1", text: "Charity 1" }, { value: "2", text: "Charity 2" }, { value: "3", text: "Charity 3" }];
document.getElementById('hdnListCount').value = listValues.length;
var
table = document.getElementById(tableId);
var
listCount = document.getElementById('hdnListCount').value;
var
rowCount = table.rows.length;
if
(rowCount <= listCount) {
var row = table.insertRow(rowCount);
// Column 1
var cell1 = row.insertCell(0);
var ddlId = "ddlCharity" + ((rowCount - 1) + 1);
var element1 = document.createElement('select');
element1.setAttribute('id', ddlId);
for (var i = 0; i <
listValues.length; i += 1) {
var option = document.createElement('option');
option.setAttribute('value', listValues[i].value);
option.appendChild(document.createTextNode(listValues[i].text));
element1.appendChild(option);
}
cell1.appendChild(element1);
// Column 2
var cell2 = row.insertCell(1);
var txtId = "txtDonationAmount" + ((rowCount - 1) + 1);
var element2 = document.createElement("input");
element2.setAttribute('id', txtId);
element2.type = "text";
element2.setAttribute('value', '0');
cell2.appendChild(element2);
// Column 3
var cell3 = row.insertCell(2);
var btnId = "btnDelete" + ((rowCount - 1) + 1);
var element3 = document.createElement("input");
element3.setAttribute('id', btnId);
element3.type = "button";
element3.setAttribute('value', 'Delete');
element3.onclick = function () { removeRow(btnId); };
cell3.appendChild(element3);
} else {
alert('You can add ' + listCount + ' charity-donation details
only!');
}
}
function removeRow(btnDelete) {
var
table = document.getElementById('dataTable');
var
rowCount = table.rows.length;
for
(var i = 0; i < rowCount; i++)
{
var row = table.rows[i];
var rowObj = row.cells[2].childNodes[0];
if (rowObj.id == btnDelete) {
table.deleteRow(i);
rowCount--;
}
}
}
function saveDetail() {
var
table = document.getElementById('dataTable');
var
rowCount = table.rows.length;
var
rowState = "";
if
(rowCount > 1) {
for (var i = 1; i <= rowCount;
i++) {
var row = table.rows[i];
var charitySelect =
row.cells[0].childNodes[0];
var donationAmount =
row.cells[1].childNodes[0];
if (donationAmount.value == "0") {
alert("Donation amount should
be greater than 0");
donationAmount.focus();
break;
}
var isValidRegex = /^\d+$/;
if
(!isValidRegex.test(donationAmount.value)) {
alert("Donation amount
should be a digit value");
donationAmount.focus();
break;
}
rowState = rowState +
charitySelect.value + ","
+ donationAmount.value + ":";
document.getElementById('hdnTableState').value = rowState;
}
} else {
alert('No record present!');
}
}
</script>
</head>
<body>
<input type="button" name="btnSave" value="Save" onclick="saveDetail();" />
<input type="button" value="Add More..." onclick="addRow('dataTable')" />
<input type="hidden" id="hdnListCount" />
<input type="hidden" id="hdnTableState" />
<table id="dataTable" width="350px" border="1">
<tr>
<th>
Charity
</th>
<th>
Donation Amount
</th>
<th>
Action
</th>
</tr>
</table>
</body>
</html>