hi,
i post my code below , if i click any remove button mean ,particular row should be removed.. but i cann't do this because the corresponding row ie tr value is not come code and also i do't know the corresponding delete code
i post my code below , if i click any remove button mean ,particular row should be removed.. but i cann't do this because the corresponding row ie tr value is not come code and also i do't know the corresponding delete code
Code:
<html>
<body>
<script language = javascript>
function adddisplay()
{
alert('hai');
}
function addRowToTable()
{
// Collect varible
var jname=document.getElementById("name").value;
var jid=document.getElementById("fid").value;
var jage=document.getElementById("age").value;
var jdept=document.getElementById("dept").value;
var jpert=document.getElementById("pert").value;
var jcgname=document.getElementById("clgname").value;
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var i;
for(i=0;i<=tbl.rows.length-1;i++)
{
var s=i;
}
alert(s);
//var tr=document.createElement("tr");
//tr.setAttribute('id', 'hid' + iteration);
//tr.appendChild(tr);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
//var tr=document.createElement("tr");
//tr.setAttribute('id', 'hid' + iteration);
//tr.appendChild(td);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('td');
//el.setAttribute('type', 'textarea');
el.setAttribute('id', 'did' + iteration);
//el.setAttribute('size', '0');
cellRight.appendChild(el);
var texttt = document.createTextNode(jname+" "+jid+" "+" "+jage+" "+jdept+" "+jpert+" "+jcgname);
cellRight.appendChild(texttt);
var cellremove= row.insertCell(2);
var rr1 = document.createElement('input');
var i;
for(i=0;i<=tbl.rows.length-1;i++)
{
rr1.setAttribute('type', 'button');
rr1.setAttribute('value','Remove' + i);
rr1.setAttribute('id', 'rid' + iteration);
rr1.setAttribute('size', '40');
rr1.onclick=function() {deleteRow(i)};
cellremove.appendChild(rr1);
}
}
function deleteRow(click_id)
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var rid=document.getElementById('did');
//for( var i=1<=tbl.rows.length-1;i++)
//{
if(click_id=="3")
{ alert(click_id);
document.getElementById('rid')[i].style.display='none';
//}
}
}
//*function editRowFromTable()
//{
//javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
//document.getElementById("b1").addEventListener("edit", function(ev) {
// if (checkbox.selected)
//{
//}
//}
//}
</script>
<form id="first">
NAME:<input type="text" id="name"><br> <br>
ID:<input type="text" id="fid"><br> <br>
AGE:<input type="text" id="age"><br> <br>
<b>QUALIFICATION:</b><br> <br>
DEPT:<input type="text" id="dept"><br> <br>
PERCENTAGE:<input type="text" id="pert"><br> <br>
COLLEGE NAME:<input type="text" id="clgname"><br> <br>
<input type="button" value="Submit" id="submit" onclick="adddisplay();"><br>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" id="r1" value="Remove" onclick="deleteRow(this.id);" />
<input type="button" id="b1" value="Edit" onclick="editRowFromTable();" />
<table border="1" id="tblSample">
</table>
</form>
</body>
</html>
Comment