1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:13 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Javascript malforms HTML, dinamically adding rows

         

leo1280

3:13 pm on Sep 30, 2005 (gmt 0)



Hi experts,
I can't assign class attribute to a dinamically generated row in a table.
I've got a simple javascript, where I generate rows as user request. The problem is that it gets malformed.
Here's the code.

Thanks in advance.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<STYLE type="text/css">
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10px;
}

td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}

th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
#center {
text-align: center;
}
.titulo {
text-align: left;
padding: 6px;
border: 1px solid #999999;
margin-top: 10px;
}

.titulo th{
background-image: url(img/fondo.jpg);
color: #666666;
}

.titulo input{
font-size:10px;
font-family: Verdana;
}
.comentario {
text-align: center;
padding-left: 5px;
border: 1px solid #999999;
margin-top: 10px;
}
.comentario th{
background-image: url(img/fondo.jpg);
color: #666666;
height: 22px;
padding-left: 10px;
text-align: left;
}
.comentario textarea{
font-size:10px;
font-family: Verdana;
width: 98%;
}
.contenido {
text-align: left;
padding: 2px;
margin-top: 10px;
background-color:#999999;
}
.contenido tr.par{
background-color: #ECECEC;
}
.contenido tr{
background-color: #FFFFFF;
}
.contenido tr.impar {
background-color: #FFFFFF;
}
.contenido tr.total {
background-color: #666666;
color: #FFFFFF;
font-weight: bold;
height: 20px;
}
.contenido th{
background-image: url(img/fondo.jpg);
color: #666666;
padding: 6px;
}
.contenido th table tr{
background: none;
}
.contenido th a{
color: #666666;
text-decoration: none;
}
.contenido th a:hover{
color: #666666;
text-decoration: underline;
}

.contenido input{
font-size:10px;
font-family: Verdana;
}
.contenido tr.header{
background-image: none;
background-color: #FF0000;
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
.linea {
background-color: #FF0000;
height: 1px;
}
.botones {
text-align: center;
padding: 5px;
border: 1px solid #999999;
margin-top: 10px;
}

</STYLE>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form name="form1" action="/RRHH/FrontServlet" method="POST">

<script language="JavaScript">
function enviar(){
document.forms[0].submit();
}
</script>

<script language="Javascript">
function addRowToTable(tableID)
{
var tbl = document.getElementById(tableID);
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

if((iteration%2) == 0){
row.setAttribute("class", "impar");
}
else {
row.setAttribute("class", "par");
}

// left cell
var cellLeft = row.insertCell(0);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'T_' + tableID + '_F' + iteration + '_codigo');
el.setAttribute('id', 'T_' + tableID + '_F' + iteration + '_codigo');
el.setAttribute('size', '10');
cellLeft.appendChild(el);
}
</script>

<input type="hidden" name="op" value="SaveGrupoObjetivo">

<div align="center">

<table width="600" border="0" cellspacing="1" cellpadding="0" class="contenido" id="GrupoObjetivo">
<tr>
<th colspan="3" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">Dimension </td>
<td align="right"><a href="javascript:addRowToTable('GrupoObjetivo');">+ New One!</a>&nbsp; </td>
</tr>
</table>
</th>
</tr>
<tr class="header">
<td align="center"><strong>Code</strong></td>
</tr>

<tr class="par">

<input name="T_GrupoObjetivo_F1_oid" type="hidden" value="1506">
<td align="center"><input name="T_GrupoObjetivo_F1_codigo" type="text" value="GO1" size="10"></td>
</tr>

<tr class="impar">
<input name="T_GrupoObjetivo_F2_oid" type="hidden" value="1507">
<td align="center"><input name="T_GrupoObjetivo_F2_codigo" type="text" value="GO2" size="10"></td>
</tr>

<tr class="par">
<input name="T_GrupoObjetivo_F3_oid" type="hidden" value="1508">
<td align="center"><input name="T_GrupoObjetivo_F3_codigo" type="text" value="GO3" size="10"></td>
</tr>

<tr class="impar">

<input name="T_GrupoObjetivo_F4_oid" type="hidden" value="1509">
<td align="center"><input name="T_GrupoObjetivo_F4_codigo" type="text" value="GO4" size="10"></td>
</tr>

<tr class="par">

<input name="T_GrupoObjetivo_F5_oid" type="hidden" value="1510">
<td align="center"><input name="T_GrupoObjetivo_F5_codigo" type="text" value="G05" size="10"></td>
</tr>

</table>
<br>
</div>

</form>
</body>
</html>

Bernard Marx

4:54 pm on Sep 30, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If behaviour is anything to go by, Internet Explorer implements 
setAttribute
as an alias for good ol' javascript 'dot syntax'. For this reason, using 
setAttribute
to set a class doesn't work (neither can you use it to attach events).

You can set a class using: 

elmRef.className = "myclass";

In IE, the setAttribute way goes: 

elmRef.setAttribute('className','myclass')

Geddit?

SOLUTIONS

A) Use simple dot syntax to set classNames, or

B) store the right string in a variable: 

var classAttrString = document.all? 'className':'class';
// then later..
elmRef.setAttribute(classAttrString,'myclass')

Bernard Marx

5:10 pm on Sep 30, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This works in your code:

row.className = iteration & 1? 'impar':'par';

DELETE
if((iteration%2) == 0){
row.setAttribute("class", "impar");
}
else {
row.setAttribute("class", "par");
}
/DELETE

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:13 am May 14, 2026