javascript - CSS 通过 id 递增

Question

我有一组由 javascript 生成的文本框。其中一些文本框需要额外的 CSS 样式。我不能使用 id 属性，因为只有一些文本框需要这种样式。我也不能使用类属性，因为它在所有文本框中都是相同的。

我目前正在使用这样的 CSS:

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

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

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

有没有一种方法可以在不单独设置样式的情况下循环遍历这些 ID(从#txtSysy8 到#txtSys19)？

这是生成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;

我正在检查一个 javascript 数组，如果该数组包含带有“RSS_FEED_LINK”的字符串，它将向字符串“rssTag”附加一个文本框和一个复选框。否则，只会添加一个文本框。

我需要将样式添加到这些生成的文本框

Answer 1

你可以使用 sub string matching attribute selector

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。

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