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?
:arrow: oTable.rows
raghavan20 wrote:Is there a way to delete the entire table itself
:arrow: oTable.outerHTML = "";

ASAT :wink:

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 8)

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 ;)