Page 1 of 1
deleting rows of a table thru DOM[SOLVED]
Posted: Sun Oct 16, 2005 8:37 am
by raghavan20
I have a table in the body.
Code: Select all
<DIV ID="oTableContainer" style="margin:100px; ">
<table id="new_table"></table>
</DIV>
I reference it in the Javascript using
Code: Select all
var oTable = document.getElementById("new_table");
Now I want to delete a few rows in the table.
1. How do I access the rows?
2. Is there a way to delete the entire table itself cos I can render the whole table again since its not so large?
Posted: Sun Oct 16, 2005 10:24 am
by feyd
you have to walk the object tree (to correctly remove the parts)
Posted: Mon Oct 17, 2005 1:40 am
by n00b Saibot
raghavan20 wrote:How do I access the rows?

oTable.rows
raghavan20 wrote:Is there a way to delete the entire table itself

oTable.outerHTML = "";
ASAT

Posted: Mon Oct 17, 2005 8:34 am
by raghavan20
I have found another way to delete the table
Code: Select all
parent.removeChild(table_reference);
but now I have to find a way to delete all the rows in a table...this is a sample structure what i have in my original doc...but I can not make it work...can you find obvious logic error??
Code: Select all
<body>
<div id="top" align="center">
<div id="nested" style="background-color:#CCCCCC " onclick="killme();"> hi all </div>
<table id="new_table">
<tr><td onclick="killme()">kill me</td></tr>
</table>
</div>
<script type="text/javascript">
function killme(){
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var new_table = document.getElementById("new_table");
//var throwaway_node = d.removeChild(d_nested);
//throwaway_node = d.removeChild(new_table);
new_table.tbodies[0].deleteRow(0);
}
</script>
</body>
Posted: Mon Oct 17, 2005 7:37 pm
by raghavan20
This has helped solve the problem.
Code: Select all
/* Reference an existing table */
var oTable = document.getElementById("oTable");
var rows = oTable.getElementsByTagName("TR");
var max_count = rows.length;
var m = 0;
while(m < max_count){
m++;
oTable.deleteRow(0);
}
Posted: Tue Oct 18, 2005 1:58 am
by n00b Saibot
Raghavan20 wrote:new_table.tbodies[0].deleteRow(0);
if you don't have TBODY tag in your table tbodies object doesn't exist... and also tbodies should be tBodies.
Posted: Tue Oct 18, 2005 4:41 am
by raghavan20
I have nt really tried tbodies yet.
but i will say something whether you believe it or not
i delete rows directly. but the rows that are created are created via tbodies[0].
This is how my script works
Code: Select all
/* Reference an existing table */
var oTable = document.getElementById("oTable");
var rows = oTable.getElementsByTagName("TR");
//DEBUG//alert ("rows:" + rows);
var max_count = rows.length;
var m = 0;
//DEBUG//alert ("rows count:" + max_count);
while(m < max_count){
//DEBUG//alert (m);
m++;
oTable.deleteRow(0);
}
var d = document.getElementById("top");
var oTBody0 = document.createElement("TBODY");
var oRow, oCell;
var i, j;
// Insert the created elements into oTable.
oTable.appendChild(oTBody0);
// Set the table's border width and colors.
oTable.border=1;
//oTable.bgColor="lightslategray";
oTable.borderColor="yellow";
// Set the background color of the first body.
oTBody0.bgColor = "white";
// Create and insert rows and cells into the second body.
oRow = document.createElement("TR");
oTBody0.appendChild(oRow);
for (j=0; j < matched_keys.length; j++)
{
oCell = document.createElement("TD");
oCell.innerText = matched_keys[j];
if (matched_keys[j] == compare_string){
oCell.bgColor = "darkYellow";
oCell.text="white";
}
oRow.appendChild(oCell);
}
// Create and insert rows and cells into the second body.
oRow = document.createElement("TR");
oTBody0.appendChild(oRow);
for (j=0; j < matched_values.length; j++)
{
oCell = document.createElement("TD");
oCell.innerText = matched_values[j];
oRow.appendChild(oCell);
}
// Insert the table into the document tree.
d.appendChild(oTable);
Anybody know how to change the fore color of the td cell? Can you tell me the property like bgColor?
Posted: Wed Oct 19, 2005 5:20 am
by n00b Saibot
Edited Code:
Code: Select all
/* Reference an existing table */
var oTable = document.getElementById("oTable");
var rows = oTable.rows;
//DEBUG//alert ("rows:" + rows);
var max_count = rows.length;
var m = 0;
//DEBUG//alert ("rows count:" + max_count);
while(m < max_count){
//DEBUG//alert (m);
m++;
oTable.deleteRow(0);
}
var d = document.getElementById("top");
var oRow, oCell;
var i, j;
// Set the table's border width and colors.
oTable.border=1;
//oTable.bgColor="lightslategray";
oTable.borderColor="yellow";
// Create and insert rows and cells
oRow = oTable.insertRow(0);
for (j=0; j < matched_keys.length; j++)
{
oCell = oRow.insertCell(j);
oCell.innerText = matched_keys[j];
if (matched_keys[j] == compare_string){
oCell.bgColor = "darkYellow";
oCell.style.color="white";
}
}
// Create and insert rows and cells
oRow = oTable.insertRow(0);
for (j=0; j < matched_values.length; j++)
{
oCell = oRow.insertCell(j);
oCell.innerText = matched_values[j];
}
/* ***WONDER WHY YOU NEED THIS***
// Insert the table into the document tree.
d.appendChild(oTable);*/
shorter code, isn't it

Posted: Wed Oct 19, 2005 7:12 pm
by raghavan20
Code: Select all
/* ***WONDER WHY YOU NEED THIS***
// Insert the table into the document tree.
d.appendChild(oTable);*/
sorry, I forgot to remove this code. actually I was using a different logic earlier where I had this piece of code in there.
I have got a few problems now
1. The creation of rows is not proper in Mozilla as it works fine with IE
2. I have set body width and height as 98% which works properly in Mozilla not in IE...why??
3. The borders for the body does not work as well..why??
4. Is text-align:center property supported for body tag cos it works with IE not in Mozilla?
Here is the
link to the file
Posted: Fri Oct 21, 2005 4:07 am
by n00b Saibot
I just tried it out in FF 1.5 β1.
1. everything works jus fine for me. with both the codes.
2. width properly renders 98% in my IE
3. maybe border is N/A for body in IE
4. it also doesn't work for me
HTH
