harshpandya Posted June 24, 2008 Share Posted June 24, 2008 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 More sharing options...
Jesdisciple Posted June 24, 2008 Share Posted June 24, 2008 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 More sharing options...
harshpandya Posted June 24, 2008 Author Share Posted June 24, 2008 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 More sharing options...
Jesdisciple Posted June 25, 2008 Share Posted June 25, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.