CODEWITHSUNDEEP
javascriptcssstylesdynamically-generated
Dilanga Thalpegama
Dilanga Thalpegama

Reputation: 165

CSS Increment through id

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

Upvotes: 1

Views: 3388

Answers (3)

user2587132
user2587132

Reputation:

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

Upvotes: 2

Dilanga Thalpegama
Dilanga Thalpegama

Reputation: 165

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

Upvotes: 0

mguimard
mguimard

Reputation: 1891

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

Upvotes: 5

Related Questions