How to create a cell with attributes? (see attachment) [Archive]

Click to See Complete Forum and Search --> : How to create a cell with attributes? (see attachment)

Caliban

02-08-2003, 04:55 PM

Hi,
It's my first time in this forum, and here is my question:
How can I create an element with id's?
i.e, I have the following table:

<TABLE ID='MyTable' BORDER=1>
<TBODY>
<TD ALIGN='CENTER' id='cell_11' MyValue = '1'>Value1</TD>
</TBODY>
</TABLE>

I insert a row below the existing one, using the following function:

function Add_Record(){
var tbody = document.getElementById('MyTable').getElementsByTagName("TBODY")[0];
number_of_rows = document.getElementById('MyTable').rows.length + 1;
MyLabel = 'value ' + number_of_rows;
var row = document.createElement("TR");
var td1 = document.createElement("TD");
td1.appendChild(document.createTextNode(MyLabel));
row.appendChild(td1);
tbody.appendChild(row);
}

With this piece of code, I just have a text in the new cell, and nothing more. But I need to store '2' in the variable "MyValue" of the new cell, and "cell_21" in the "id" of the new cell. How can I create a new cell with this two attributes?

I have attached the code, if anyone wants to take a look at it.
But if you have a better one, I'll appreciate if you share it.

Thanx in advance.

khalidali63

02-08-2003, 05:56 PM

add the attributes using setAttribute method.

here is the parameter format
element.setAttribute("attributeName","attributeValue");

in your case the adding an id attribute will be like below.

td1.setAttribute("id","cell_21");

cheers

Khalid

Caliban

02-09-2003, 10:27 AM

Hi Khalid,
thanx 4 the info ... it works, and it's very useful for me!

Excuse me if I ask another question to you :D

It's possible to associate an attribute FONT(name, size) to the new cell?

I tried with this:

td1.setAttribute("font-family","Arial");

but it doesn't seem to work.
I normally work with styles, like this:

<style type="text/css">
.CellStyle_01{ color: #000000; font-size: 8pt; font-family: Arial}
.CellStyle_02{ color: #000000; font-size: 12pt; font-family: Sans-Serif}
</style>

And I apply it to the cells, like this:
<TABLE>
<TR class='CellStyle_01'><TD>Test1</TD></TR>
<TR class='CellStyle_02'><TD>Test1</TD></TR>
</TABLE>

Any suggestion(s) to simulate this in JavaScript ?

Thanx in advance.
PD: I'm new in the JS world(3 days ago), but I promise to buy a book in this week :)

Caliban

02-09-2003, 10:53 AM

Forget about I ask in the last reply!

I found how to.

I only have to create a new style named "table.All_Table" , and apply it to every table I need.

The code, like this:

<HTML>
<HEAD>
<style type="text/css">
table.All_Table{color: #000000; font-size: 8pt; font-family:Arial}
</style>
</HEAD>

<TABLE class='All_Table' id='Careers'>
<TBODY>
<TR><TD id='Cell_11' MyValue='1'>Text_11</TD></TR>
<TR><TD id='Cell_21' MyValue='2'>Text_21</TD></TR>
</TBODY>
</TABLE>
</HTML>

When I add a new row in this table (thanx to the code you share :D ) every cell of the new row inherits the font attributes of the table. It's that simple, are you?

Anyway, thanx for all.

CALIBAN

khalidali63

02-09-2003, 11:01 AM

You are wellcome,
Thats all this forum is for.
Keep spreading the good.

Cheers

Khalid