[SOLVED] Apply CSS to input tag via the DOM/add row script

[piznac]

Ok,.. I have this script that will add a row to my table. This works fine,. but it wont seem to regonize the "class" attribute. Is this becuase "class" is not a proper attribute? If so,. is there a work around for this?.. As you can see I tried e1.class = 'texta' & e1.className = 'texta',... the first one gives me an error of expected indentifier,.. the 2nd one tells me e1 is not defined,.. here is the script,.. and a link to a the page itself:

 

<script language="javascript" type="text/javascript">
<!--
function addRowToTable()
{
  var tbl = document.getElementById('it');
  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);
  
  // left cell
  var cellRight = row.insertCell(0);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'item_num';
  el.id = 'item_num';
  el.size = 12;
  //e1.className = 'texta';
  

  cellRight.appendChild(el);
  
   // next cell
  var cellnext = row.insertCell(1);
  var e2 = document.createElement('input');
  e2.type = 'text';
  e2.name = 'item_desc';
  e2.id = 'item_desc';
  e2.size = 90;
  //e2.className = 'texta';
  

  cellnext.appendChild(e2);
  
  
  
  // select cell
  var cellRightSel = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'size';
  sel.id = 'size';
  //sel.class = 'texta';
  sel.options[0] = new Option('ONE SIZE');
  sel.options[1] = new Option('XS');
  sel.options[2] = new Option('S');
  sel.options[3] = new Option('M');
  sel.options[4] = new Option('L');
  sel.options[5] = new Option('XL');
  sel.options[6] = new Option('2XL');
  sel.options[7] = new Option('3XL');
  sel.options[8] = new Option('4XL');
  sel.options[9] = new Option('1X');
  sel.options[10] = new Option('2X');
  sel.options[11] = new Option('3X');
  sel.options[12] = new Option('4X');
  sel.options[13] = new Option('5X');
  sel.options[14] = new Option('6X');
  sel.options[15] = new Option('YXS');
  sel.options[16] = new Option('YS');
  sel.options[17] = new Option('YM');
  sel.options[18] = new Option('YL');
  sel.options[19] = new Option('YXL');
  sel.options[20] = new Option('6M');
  sel.options[21] = new Option('12M');
  sel.options[21] = new Option('T2');
  sel.options[23] = new Option('T4');
  sel.options[24] = new Option('XXL');
  sel.options[25] = new Option('XXXL');
  sel.options[26] = new Option('XXXXL');
  sel.options[27] = new Option('XXXXXL');
  sel.options[28] = new Option('XXXXXXL');
  sel.options[29] = new Option('OSFM');
  sel.options[30] = new Option('OSFA');
  sel.options[31] = new Option('1XL');
  sel.options[32] = new Option('SMALL');
  sel.options[33] = new Option('MEDIUM');
  sel.options[34] = new Option('LARGE');
  sel.options[35] = new Option('5XL');
  sel.options[36] = new Option('0');
  sel.options[37] = new Option('0-6M');
  sel.options[38] = new Option('12-18M');
  sel.options[39] = new Option('18-24M');
  sel.options[40] = new Option('2');
  sel.options[41] = new Option('2T');
  sel.options[42] = new Option('3-6M');
  sel.options[43] = new Option('3T');
  sel.options[44] = new Option('4');
  sel.options[45] = new Option('4T');
  sel.options[46] = new Option('6');
  sel.options[47] = new Option('6-12M');
  sel.options[48] = new Option('8');
  sel.options[49] = new Option('L-XL');
  sel.options[50] = new Option('Plus2X');
  sel.options[51] = new Option('Plus3X');
  sel.options[52] = new Option('Plus4X');
  sel.options[53] = new Option('S-M');
  sel.options[54] = new Option('XXS');
  sel.options[55] = new Option('10-12Y');
  sel.options[56] = new Option('14-16');
  sel.options[57] = new Option('18-20');
  sel.options[58] = new Option('18M');
  sel.options[59] = new Option('24M');
  sel.options[60] = new Option('2XG');
  sel.options[61] = new Option('5-6Y');
  sel.options[62] = new Option('6-8Y');
  sel.options[63] = new Option('7Y');
  sel.options[64] = new Option('AO');
  sel.options[65] = new Option('2XL-3XL');
  sel.options[66] = new Option('6XL');
  sel.options[67] = new Option('Plus1X');
  sel.options[68] = new Option('W27');
  sel.options[69] = new Option('W28');
  sel.options[70] = new Option('W29');
  sel.options[71] = new Option('W30');
  sel.options[72] = new Option('W31');
  sel.options[73] = new Option('W32');
  sel.options[74] = new Option('W33');
  sel.options[75] = new Option('W34');
  sel.options[76] = new Option('W35');
  sel.options[77] = new Option('W36');
  sel.options[78] = new Option('W37');
  sel.options[79] = new Option('W38');
  sel.options[80] = new Option('W40');
  sel.options[81] = new Option('W42');
  sel.options[82] = new Option('W44');
  sel.options[83] = new Option('W46');
  sel.options[84] = new Option('W48');
  sel.options[85] = new Option('W50');
  sel.options[86] = new Option('W52');
  sel.options[87] = new Option('W54');
  sel.options[88] = new Option('W56');
  sel.options[89] = new Option('W58');
  sel.options[90] = new Option('W60');
   
  cellRightSel.appendChild(sel);
  
  // right cell
  var cellfarRight = row.insertCell(3);
  var e4 = document.createElement('input');
  e4.type = 'text';
  e4.name = 'qty';
  e4.id = 'qty';
  //e4.class = 'texta';
  
  
  cellfarRight.appendChild(e4);
}

 

http://www.sewnice.biz/ordering3.php

 

If you go to the example and click "add row" you will see my problem,. the add row works but does not keep the style,.. any help would be great thanks!

 

[Psycho]

className is the property you want. The problem is that your reference for the first cell is incorrect:

 

  // left cell
  var cellRight = row.insertCell(0);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'item_num';
  el.id = 'item_num';
  el.size = 12;
  e1.className = 'texta';

 

Your reference name is el (the letter L), but your last reference for the className is e1 (the number one). If fix that and change all the parameter names to className it will work.

 

But there is a much easier solution. Since you have these rows in a table, give the table a class name (say "orderTable"), then you can specify the class for all the input fields without having to specifically specify it in each field by specifying it in your style sheet:

 

orderTable input {

  //styles for input fields go here

}

 

Then any input fields within that table will have the same style automatically - no need to set the calss for each field specifically.

 

I also have another simplified solution for you. Because of another post wanting the ability to append a row to a table I came up with a function that will create a copy of the first row and then append that copy. If you do that, then when you need to modify your select list or change anything you dont have to modify your javascript that creates the fields.

 

Here is what I had:

 

<html>

<head><script>
// Last updated 2006-02-21
function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  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);

  //Title
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode('Service '+iteration+':');
  cellLeft.appendChild(textNode);

  //Service
  var serviceCell = row.insertCell(1);
  serviceCell.appendChild(tbl.rows[1].cells[1].cloneNode(true));

  //Country
  var countryCell = row.insertCell(2);
  countryCell.appendChild(tbl.rows[1].cells[2].cloneNode(true));

  //Command
  var commandCell = row.insertCell(3);
  commandCell.appendChild(tbl.rows[1].cells[3].cloneNode(true));

}

function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

</script>
</head>

<body>
<form action="tableaddrow_nw.html" method="get">

<table border="1" id="tblSample">

  <tr>
    <td> </td><td>Service</td><td>Country</td><td>Command</td>
  </tr>
  <tr>
    <td>Service 1:</td>
    <td>
            <select name="service[]">
            <option value=''>Select one</option>
            <option selected value='Army'>Army1</option>
            <option value='Navy'>Navy</option>
            <option value='Air Force'>Air Force</option>
            <option value='Marine Corps'>Marine Corps</option>
            <option value='Coast Guard'>Coast Guard</option>
            <option value='None'>None</option></select>
    </td>
    <td>
            <select name="country[]" onchange="reload3(this.form)">
            <option value=''>Select one</option>
            <option value='United States'>United States</option>
            <option value='Belgium'>Belgium </option>
            <option value='Germany'>Germany </option>
            <option value='Italy'>Italy </option>
            <option value='Japan'>Japan </option>
            <option value='Korea'>Korea </option>
            <option value='Netherlands'>Netherlands </option>
            </select>
    </td>
    <td>
            <select name="command_name[]" >
            <option value=''>Select one</option>
            </select>
    </td>
  </tr>
</table>

<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />

</form>

</body>
</html>

 

[piznac]

DOOOH!!,... LOL,.. thanks a bunch man,...

 

Also does the setting of the class for all inputs work in IE? I've always heard that it didn't?

[piznac]

Ahhh that does look alot more simple,.. Im so new to JS but Im assuming "cloneNode" will clone the input tags?.. If so thats nice man. I might have to use that next time,.. but I already retyped my select,..lol

[Psycho]

Also does the setting of the class for all inputs work in IE? I've always heard that it didn't?

 

It did in my IE, but it will also apply that class to checkboxes and radio buttons (which I don't think you wnt in this situation) which is why I suggested you only apply the style to a sub-class of the table. Otherwise, you could simple create a global style for input in the style sheet.

 

Ahhh that does look alot more simple,.. Im so new to JS but Im assuming "cloneNode" will clone the input tags?.. If so thats nice man. I might have to use that next time,.. but I already retyped my select,..lol

 

I *believe* childNode is creating an exact copy of the node which, in this case, is a table cell and it's contents.

 

Use this function instead. Much cleaner and creates an exact copy of the first data row.

function addRowToTable()
{
  var tbl = document.getElementById('it');
  var inputRow = tbl.rows.length -1;
  var row = tbl.insertRow(tbl.rows.length);

  for (i=0; i<tbl.rows[inputRow].cells.length; i++) {
    row.appendChild(tbl.rows[inputRow].cells[i].cloneNode(true));
  }

  return;
}

[Psycho]

You also need to change your removeRowFromTable() function so that

 

if (lastRow > 3) tbl.deleteRow(lastRow - 1);

 

Otherwise users can delete the first data row!