Jump to content

Auto Add row in table


harshpandya
 Share

Recommended Posts

Hi All, I have this code to generate new row each time. Now i want to check if result is pass display pass text in Green color and if failed display failed in red color. Que-2 - is there a way to add row on bottom instead of Top. Because right now it adds row on top, i want row to be added on bottom.But i can not find any color propertise for this. Any Help.Thanks, <table id="myTable" cellspacing="0" border="1" bordercolor="#d9dde0"> <tbody> <tr> <td align="center" width = 50 bgcolor="#c9cdce"><strong>No:</strong></td> <td align="center" width = 300 bgcolor="#c9cdce"><strong>Test Name:</strong></td> <td align="center" width = 100 bgcolor="#c9cdce"><strong>Result:</strong></td> <td align="center" width = 530 bgcolor="#c9cdce"><strong>Details:</strong></td> </tr> </tbody></table>var num = 0; var Tname = 2; var Result = 3; var Details = 3; addRow('myTable', Tname, Result, Details); addRow('myTable', Tname, Result, Details); addRow('myTable', Tname, Result, Details); addRow('myTable', Tname, Result, Details);//This Function Adds Row to the Table each time we Call function. function addRow(id, Tname, Result, Details){ num++; var tbody = document.getElementById (id).getElementsByTagName("TBODY")[0]; var row = document.createElement("TR") var td1 = document.createElement("TD") td1.appendChild(document.createTextNode(num)) var td2 = document.createElement("TD") td2.appendChild (document.createTextNode(Tname)) var td3 = document.createElement("TD") td3.appendChild(document.createTextNode(Result)) var td4 = document.createElement("TD") td4.appendChild(document.createTextNode(Details)) row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); row.appendChild(td4); tbody.appendChild(row); }How do i assign diferent color to cell Text or background.???Thanks,

Link to comment
Share on other sites

I think your goal will be much easier to reach if you use the insertRow & insertCell methods and the rows & cells arrays... See http://w3schools.com/htmldom/dom_obj_table.asp and http://w3schools.com/htmldom/dom_obj_tablerow.asp. But if you're determined to use the generic DOM methods, see http://www.google.com/search?q=insertbefore. (I need to test appendChild to verify that it inserts cells at the beginning of a row.)EDIT: appendChild works fine for me... Here's the source of the page after the JavaScript does its stuff (in Firefox, Ctrl-A, right-click, View Selection Source):

<html><head><title>Titled Document</title>					<script type="text/javascript" src="appendCell.js"></script></head><body>		<table id="myTable" border="1" bordercolor="#d9dde0" cellspacing="0">			<tbody>				<tr>					<td align="center" bgcolor="#c9cdce" width="50"><strong>No:</strong></td>					<td align="center" bgcolor="#c9cdce" width="300"><strong>Test Name:</strong></td>					<td align="center" bgcolor="#c9cdce" width="100"><strong>Result:</strong></td>					<td align="center" bgcolor="#c9cdce" width="530"><strong>Details:</strong></td>				</tr>			<tr><td>1</td><td>2</td><td>3</td><td>3</td></tr><tr><td>2</td><td>2</td><td>3</td><td>3</td></tr><tr><td>3</td><td>2</td><td>3</td><td>3</td></tr><tr><td>4</td><td>2</td><td>3</td><td>3</td></tr></tbody>		</table>	</body></html>

EDIT2: And to change font-color and background-color of cell to green and red, respectively...

cell.style.color = 'green';cell.style.backgroundColor = 'red';

(This works on rows too.)

Link to comment
Share on other sites

Thanks - This is exaclty i wanted - now i have more control over my table. function insRow(){var x=document.getElementById('myTable').insertRow(0);var y=x.insertCell(0);var z=x.insertCell(1);y.innerHTML="NEW CELL1";z.innerHTML="NEW CELL2";}Also i figured out the next Row Problem. Its simple. i just created new var num; and var x=document.getElementById('myTable').insertRow(num++);so now whenever i call this function it will add new row to new line and then add content to it. Cool,

Link to comment
Share on other sites

Which browser are you using? I don't understand why appendChild isn't working for you.And actually the JS will manage the number of rows for you:

var table = document.getElementById('myTable');var x = table.insertRow(table.rows.length - 1);

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...