• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1374
  • Last Modified:

CSS style sheet to dynamically created textbox using javascript

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.

<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);
  // 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;
  // 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');
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',
  // set the target to the blank window
  frm.target = 'TableAddRowNewWindow';
  // 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');
<form action="tableaddrow_nw.html" method="get">
<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
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
<table border="1" id="tblSample">
    <th colspan="3">Sample table</th>
    <td><input type="text" name="txtRow1" id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" /></td>
    <select name="selRow0">
    <option value="value0">text zero</option>
    <option value="value1">text one</option>

Open in new window

1 Solution
You can apply css to dynamically created textbox like this...

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

then add that css to your page like this..

<style type="text/css">
Hi dotsandcoms,

what not work?

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

for example, put the next code

input {
    background-color: red;

you can see your inputs with background red.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now