Solved

CSS style sheet to dynamically created textbox using javascript

Posted on 2008-09-30
2
1,353 Views
Last Modified: 2012-05-05
Hi floks,

I am creating the textbox dynamically using javascript. I am want to apply css style sheet to it and things are not working.

Plz advice.

Thanks
<html>
 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Validate Submit</title>

<script language="javascript">

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);

  

  // left cell

  var cellLeft = row.insertCell(0);

  var textNode = document.createTextNode(iteration);

  cellLeft.appendChild(textNode);

  

  // right cell

  var cellRight = row.insertCell(1);

  var el = document.createElement('input');

  el.type = 'text';

  el.name = 'txtRow' + iteration;

  el.id = 'txtRow' + iteration;

  el.size = 40;

  

  el.onkeypress = keyPressTest;

  cellRight.appendChild(el);

  

  // select cell

  var cellRightSel = row.insertCell(2);

  var sel = document.createElement('select');

  sel.name = 'selRow' + iteration;

  sel.options[0] = new Option('text zero', 'value0');

  sel.options[1] = new Option('text one', 'value1');

  cellRightSel.appendChild(sel);

}

function keyPressTest(e, obj)

{

  var validateChkb = document.getElementById('chkValidateOnKeyPress');

  if (validateChkb.checked) {

    var displayObj = document.getElementById('spanOutput');

    var key;

    if(window.event) {

      key = window.event.keyCode; 

    }

    else if(e.which) {

      key = e.which;

    }

    var objId;

    if (obj != null) {

      objId = obj.id;

    } else {

      objId = this.id;

    }

    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);

  }

}

function removeRowFromTable()

{

  var tbl = document.getElementById('tblSample');

  var lastRow = tbl.rows.length;

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

}

function openInNewWindow(frm)

{

  // open a blank window

  var aWindow = window.open('', 'TableAddRowNewWindow',

   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

   

  // set the target to the blank window

  frm.target = 'TableAddRowNewWindow';

  

  // submit

  frm.submit();

}

function validateRow(frm)

{

  var chkb = document.getElementById('chkValidate');

  if (chkb.checked) {

    var tbl = document.getElementById('tblSample');

    var lastRow = tbl.rows.length - 1;

    var i;

    for (i=1; i<=lastRow; i++) {

      var aRow = document.getElementById('txtRow' + i);

      if (aRow.value.length <= 0) {

        alert('Row ' + i + ' is empty');

        return;

      }

    }

  }

  openInNewWindow(frm);

}
 
 

</script>

</head>
 

<body>

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

<p>

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

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

<input type="button" value="Submit" onclick="validateRow(this.form);" />

<input type="checkbox" id="chkValidate" /> Validate Submit

</p>

<p>

<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress

<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>

</p>

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

  <tr>

    <th colspan="3">Sample table</th>

  </tr>

  <tr>

    <td>1</td>

    <td><input type="text" name="txtRow1" id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" /></td>

    <td>

    <select name="selRow0">

    <option value="value0">text zero</option>

    <option value="value1">text one</option>

    </select>

    </td>

  </tr>

</table>

</form>
 

</body>
 

</html>

Open in new window

0
Comment
Question by:dotsandcoms
2 Comments
 
LVL 4

Accepted Solution

by:
sijishJohn earned 250 total points
ID: 22612053
You can apply css to dynamically created textbox like this...

var el = document.createElement('input');
el.className="txtStyle";

then add that css to your page like this..

<style type="text/css">
.txtStyle
{
    color:Red;    
}
</style>
0
 
LVL 5

Expert Comment

by:jose_juan
ID: 22612060
Hi dotsandcoms,

what not work?

put a css style, if not, what style must be applicated?

for example, put the next code

<style>
input {
    background-color: red;
}
</style>
</head>

you can see your inputs with background red.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now