Menu
I want to edit content of my html table using javascript. I am getting content in the form on click of edit button but when i click on save button it doesn't update the values of that row please help me out as it'll be very appreciated..
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(myTable) {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtname').value;
cell3.innerHTML=document.getElementById('txtauthor').value;
cell4.innerHTML=document.getElementById('txtcdate').value;
}
function deleteRow(myTable) {
try {
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function edt(myTable) {
try {
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
document.getElementById("txtname").value = table.rows[i].cells["1"].innerHTML;
document.getElementById("txtauthor").value = table.rows[i].cells["2"].innerHTML;
document.getElementById("txtcdate").value = table.rows[i].cells["3"].innerHTML;
//document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
//document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("crw").value = i;
}
}
}catch(e) {
alert(e);
}
}
function savedit(myTable){
if(null != chkbox && true == chkbox.checked) {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtname').value;
cell3.innerHTML=document.getElementById('txtauthor').value;
cell4.innerHTML=document.getElementById('txtcdate').value;
}
}
</SCRIPT>
</HEAD>
HTML
<BODY>
<INPUT type="button" value="Add Row" onClick="addRow('myTable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('myTable')" />
<INPUT type="button" value="Edit Row" onClick="edt('myTable')" />
<INPUT type="button" value="Save" onClick="savedit('myTable')" />
<table id="myTable" border="1">
<thead>
<th id="name"><input type="checkbox" id="chkbox" /></th>
<th id="name">Name</th>
<th id="author">Author</th>
<th id="cdate">Date</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="chkbox1" /></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td><input type="checkbox" id="chkbox2" /></td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<form name="create"2 style="width:80px;">
Name:<input type="text" id="txtname" /><br/>
Author<input type="text" id="txtauthor" name="txtauthor" /><br/>
Date:<input type="text" id="txtcdate" name="txtcdate" /><br/>
Content:<input type="text" id="txtcontent" name="txtcontent" style="height:80px; " />
</form>
<input type="hidden" id="crw">
</BODY>
</HTML>
832
asked Jul 12 '26 09:07
replace edit function with following code(vice verse of your add function)
function savedit(myTable){
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.rows[i].cells["1"].innerHTML = document.getElementById("txtname").value ;
table.rows[i].cells["2"].innerHTML = document.getElementById("txtauthor").value;
table.rows[i].cells["3"].innerHTML = document.getElementById("txtcdate").value ;
//document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
//document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("txtname").value = '';
document.getElementById("txtauthor").value = '';
document.getElementById("txtcdate").value = '' ;
chkbox.checked = false;
document.getElementById("crw").value = i;
}
}
}
I strongly recommend you to use some plugin or grid like kendo that is already tested and working
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
