Hi, I need to change the colour of the newly appended rows, although it doesn't seem to be working with what I have.
Any advice would be good?
It currently appends a new row, although I need this new row to be 'added' in a green font.
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lab 5 - Task C</title>
<style type="text/css">
.ab
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: #993300;
background-color: #CCFFCC;
padding: 5px;
height: 100px;
width: 350px;
border: thin dotted #993300;
}
.green
{
font-family: Verdana, Arial, Helvetica, sans-serif';
color: #006600;
}
table, th, td
{
border: 1px solid black;
}
</style>
<script type="text/javascript">
var i = 0;
function addressBookItem (fname, lname, email)
{
this.fname= fname;
this.lname = lname;
this.email = email;
}
function appendRow()
{
var fname = prompt("Please enter your first name:","Your name");
var lname = prompt("Please enter your last name:","Your last name");
var email = prompt("Please enter your email:","Your name");
//var adrbook = document.createTextNode("<tr class='.green'> <td>" + fname + "</td> <td>" + lname + " </td> <td>" + email + "</td> </tr>");
var table = document.getElementById("addrBook");
r = table.insertRow(-1);
r.className = "green";
c = r.insertCell(0);
c.innerHTML = fname;
c.className = "normal";
c = r.insertCell(1);
c.innerHTML = lname;
c = r.insertCell(2);
c.innerHTML = email;
document.body.appendChild(table);
}
addressBookItem.prototype.write = function()
{
var table = document.getElementById('addrBook');
r = table.insertRow(-1);
c = r.insertCell(0);
c.innerHTML = this.fname;
c = r.insertCell(1);
c.innerHTML = this.lname;
c = r.insertCell(2);
c.innerHTML = this.email;
document.body.appendChild(table);
}
</script>
</head>
<body>
<script type="text/javascript">
// table data
var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
// create table
var table = document.createElement("table");
table.id = "addrBook";
r = table.insertRow(0);
c = r.insertCell(0);
c.innerHTML = 'First Name';
c = r.insertCell(1);
c.innerHTML = 'Last Name';
c = r.insertCell(2);
c.innerHTML = 'Email';
document.body.appendChild(table);
aB1.write();
aB2.write();
</script>
<input type="button" onclick="appendRow()" value="Append Row">
</br>
</body>
</html>
LinkBack URL
About LinkBacks
Javascript - changing font colour of row
Reply With Quote
Related threads:
