I have a set of textboxes generated by javascript. some of those textboxes need additional CSS styling. i cannot use the id property because only some textboxes need this styling. i also cannot use the class property because it is the same in all the textboxes.

I am currently using CSS like this:

#txtSys8
{
position: relative;
left: 203px;
}

#txtSys9
{
position: relative;
left: 203px;
}

#txtSys10
{
position: relative;
left: 203px;
}

is there a way in which i can loop through these ids (from #txtSysy8 to #txtSys19) without setting the styles separately?

This is the code to generate the html

rssTag ="<TABLE id='rssTable' border=\"0\" width=\"100%\"><TBODY>";

for(var i=8; i<arrGridData.length; i++){

var upToNCharacters = arrGridData[i][0].substring(0, 13);

if(upToNCharacters == "RSS_FEED_LINK"){
rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD>  <input type=\"text\" id=\"txtSys"+i+"\" name=\"txtSys"+i+"\" onChange=\"pgEdited()\" tabindex=\" " +(i+1) +"\" class=\"fontDefault\"></TD><TD><input type=\"checkbox\" id=\"check" + arrGridData[i][0].substring(14, arrGridData[i][0].toString().length) + "\" name=\"check\" onChange=\"pgEdited()\" class=\"chk\"/></TD></TR>";

        }else{
rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD><input type=\"text\" id=\"txtSys"+i+"\" name=\"txtSys"+i+"\" onChange=\"pgEdited()\" tabindex=\" " +(i+1) +"\" class=\"fontDefault\"></TD></TR>";

        }
        createArrControls(i);

rssTag += "</TBODY></TABLE>";

document.getElementById('tableDiv2').innerHTML=rssTag;

I am checking a javascript array and if the array holds a string with "RSS_FEED_LINK", it will append a textbox and a checkbox to the string "rssTag". else, only a textbox will be added.

I need to add the styles to these generated textboxes

I have a set of textboxes generated by javascript. some of those textboxes need additional CSS styling. i cannot use the id property because only some textboxes need this styling. i also cannot use the class property because it is the same in all the textboxes.

I am currently using CSS like this:

#txtSys8
{
position: relative;
left: 203px;
}

#txtSys9
{
position: relative;
left: 203px;
}

#txtSys10
{
position: relative;
left: 203px;
}

is there a way in which i can loop through these ids (from #txtSysy8 to #txtSys19) without setting the styles separately?

This is the code to generate the html

rssTag ="<TABLE id='rssTable' border=\"0\" width=\"100%\"><TBODY>";

for(var i=8; i<arrGridData.length; i++){

var upToNCharacters = arrGridData[i][0].substring(0, 13);

if(upToNCharacters == "RSS_FEED_LINK"){
rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD>  <input type=\"text\" id=\"txtSys"+i+"\" name=\"txtSys"+i+"\" onChange=\"pgEdited()\" tabindex=\" " +(i+1) +"\" class=\"fontDefault\"></TD><TD><input type=\"checkbox\" id=\"check" + arrGridData[i][0].substring(14, arrGridData[i][0].toString().length) + "\" name=\"check\" onChange=\"pgEdited()\" class=\"chk\"/></TD></TR>";

        }else{
rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD><input type=\"text\" id=\"txtSys"+i+"\" name=\"txtSys"+i+"\" onChange=\"pgEdited()\" tabindex=\" " +(i+1) +"\" class=\"fontDefault\"></TD></TR>";

        }
        createArrControls(i);

rssTag += "</TBODY></TABLE>";

document.getElementById('tableDiv2').innerHTML=rssTag;

I am checking a javascript array and if the array holds a string with "RSS_FEED_LINK", it will append a textbox and a checkbox to the string "rssTag". else, only a textbox will be added.

I need to add the styles to these generated textboxes

• javascript
• css
• styles
• dynamically-generated

Share Improve this question Follow edited Jul 30, 2013 at 8:16 Dilanga Thalpegama asked Jul 30, 2013 at 7:27 Dilanga ThalpegamaDilanga Thalpegama 16511 gold badge55 silver badges1414 bronze badges 6

• 2 Is there any reason you can't give those elements a class? Please show us your HTML so that we can give a more accurate answer. – George Commented Jul 30, 2013 at 7:28
• 3 You can have multiple classes on one element. – Patsy Issa Commented Jul 30, 2013 at 7:29
• So which elements need what properties? What does your HTML look like? – David Thomas Commented Jul 30, 2013 at 7:29
• 1 Also you can use mas in CSS to define multiple selectors for the same rules – omma2289 Commented Jul 30, 2013 at 7:30
• LESS is a language that piles to CSS and lets you do exactly that sort of things easily and keep it DRY – Benjamin Gruenbaum Commented Jul 30, 2013 at 7:30

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

You can use sub string matching attribute selector

The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

div[id^='txtSys'] {
   position: relative;
   left: 203px;
}

change the texboxes which need new styles from

<input type='textbox' id="txtId" class="someClass"/> 
 to
<input type='textbox' id="txtId" class="someClass myClass">

 .myClass
{
 /*add your styles here*/
}

to add extra classes using pure JavaScript

document.getElementById("myDiv").className += " myClass";

Thanks all... It works fine now

My javascript:

rssTag+="<TR><TD><font>" + arrGridData[i][1] + ":</TD><TD><input type=\"text\" id=\"txtSys"+i+"\" name=\"txtSys"+i+"\" onChange=\"pgEdited()\" tabindex=\" " +(i+1) +"\" class=\"fontDefault textClass\"></TD></TR>";

I added another class to the textbox (class=\"fontDefault textClass\").

My CSS:

input.textClass
{
position: relative;
left: 202px;
}