Problems with text nodes and attributes

Tandem

02-22-2006, 12:50 PM

I want to create nodes using appendchild and modify their properties (like color or size of text) but don't know how.
My code is:
var c_table_t = document.getElementById('table_tandem')
var c_tbody_t= document.createElement('tbody')
var c_p= document.createElement('p')
var c_font= document.createElement('font')
var c_tr_t=document.createElement('tr')
var c_td_ta=document.createElement('td')
var c_td_te=document.createElement('td')
var c_td_da=document.createElement('td')
var c_td_va=document.createElement('td')
var c_td_de=document.createElement('td')
var c_text =document.createTextNode(".....................")
var c_date =document.createTextNode(date_msg[n])
var c_tandem = document.createTextNode(users[n])
var c_button_va = document.createElement('button')
var c_button_de = document.createElement('button')
c_td_ta.appendChild(c_tandem)
c_td_te.appendChild(c_text)
c_td_da.appendChild(c_date)
c_td_va.appendChild(c_button_va)
c_td_de.appendChild(c_button_de)
c_tr_t.appendChild(c_td_ta)
c_tr_t.appendChild(c_td_te)
c_tr_t.appendChild(c_td_da)
c_tr_t.appendChild(c_td_va)
c_tr_t.appendChild(c_td_de)
c_font.appendChild(c_tr_t)
c_p.appendChild(c_font)
c_tbody_t.appendChild(c_font)
c_table_t.appendChild(c_tbody_t)
c_button_va.value="View/Answer"
c_button_de.value="Delete"
c_button_va.onclick=new Function("view_ans_ms("+n+")")
c_button_de.onclick=new Function("del_msg("+n+")")

I have tried setAttributes but doesn't work. I've tried to assign an id and the access to the properties using: document.getElementById, but still doesn't work.
And another thing, why when using a text node the white spaces are interpreted as "enter"?

Thanks!!!!!!

Kor

02-22-2006, 03:16 PM

1. to set HTML attributes:

object.setAttribute('attribute','value')
ex:
object.setAttribute('name','myname')
object.setAttribute('colSpan','3')

note that the compounded attributes should be written with uppercases
colSpan, rowSpan, bgColor

2. to set CSS attributes
object.className='myclass'
or
object.style.cssattribute='cssvalue'
ex:
object.style.backgroundColor ='#CCCCFF';

note that in javascript the compunded CSS attributes loose their hyphen and use uppercase

background-color becomes backgroundColor

3. To attach an event you may use an anonymous

object.onsomeevent = function(){....}
ex:
object.onclick = function(){alert('Hello!')}

KC-Luck

02-22-2006, 03:42 PM

You had some good code, just that you can not put
<table><tbody><p><font><tr>
here's some updated code to help:

<html>
<head>
<script>

function appendRow(table, index) {
var d = document;
if (table = d.getElementById(table)) {
var tbody = table.tBodies[0];
if (!tbody) {
tbody = table.appendChild(d.createElement("tbody"));
}
var row = tbody.appendChild(d.createElement("tr"));
// store value for event reference
row.nIndex = index = (index || 0);

var cells = [
d.createElement("td"),
d.createElement("td"),
d.createElement("td"),
d.createElement("td"),
d.createElement("td")
];

var buttonView = d.createElement("button");
var buttonDelete = d.createElement("button");

cells[0].appendChild(d.createTextNode("User: "+ index )); // use your users array instead
cells[1].appendChild(d.createTextNode("....................."));
cells[2].appendChild(d.createTextNode("Date: "+ index )); // user your date_msg array instead
cells[3].appendChild(buttonView);
cells[4].appendChild(buttonDelete);
for (var i = 0; i < cells.length; i++) {
row.appendChild(cells[i]);
}

buttonView.value = "View/Answer";
buttonView.onclick = function(e) {
view_ans_ms(this.parentNode.parentNode.nIndex);
}

buttonDelete.value = "Delete";
buttonDelete.onclick = function(e) {
del_msg(this.parentNode.parentNode.nIndex);
}
return row;
}
}

onload = function() {
for (var i = 1; i <= 100; i++)
appendRow("table_tandem", i);
}

</script>
</head>
<body>
<table id="table_tandem"></table>
</body>
</html>

Tandem

02-22-2006, 03:43 PM

Thanks.
Then for example, that should work?:

var table=getElementById('table_name')
var c_text=document.createElement('div')

table_name.appendChild(c_text)
c_text.innerHTML('Hello world')
c_text.setAttribute('backgroundColor','#CCCCFF')

Could you please correct where are my mistakes?And what can I do to avoid the text not to be written in two lines?

Thanks a lot!!

Kor

02-22-2006, 03:52 PM

You can append non-table elements only to a cell element, not to a table or a row.

TBODY is javascript required. That means that you must take it in consideration even it is not HTML written in case you use parentNode or childNodes[] reference.

Use DOM methods, not innerHTML

backgroundColor is not a HTML attribute, is a CSS-on-the-fly attribute, thus it is an atribute of the style.

Don't mixt objects with their names, and ids with names.

Kor

02-22-2006, 03:58 PM

var myFirstCell=getElementById('table_id').getElementsByTagName('td')[0]
var c_text=document.createElement('div')
c_text.appendChild(document.createTextNode('Hello world!'))
c_text.style.backgroundColor='#CCCCFF';
myFirstCell.appendChild(c_text)

Tandem

02-22-2006, 04:54 PM

Thanks, I am gonna try all this!
BTW, hope Roumania will join EU !!! :thumbsup: