替换JavaScript innerHTML中的子字符串_Javascript_Regex

替换JavaScript innerHTML中的子字符串

javascript regex

替换JavaScript innerHTML中的子字符串,javascript,regex,Javascript,Regex,我有一个HTML页面，其中包含如下表行 <tr id="tp1"> <input type="checkbox" id="tc_"> </tr> <tr id="tp2"> <input type="checkbox" id="tc_"> </tr> 该页面还包含除复选框以外的输入元素我必须将所有复选框id的值从tc_u更改为tc_1、tc_2等等。我曾想过按如下

我有一个HTML页面，其中包含如下表行

    <tr id="tp1">
    <input type="checkbox" id="tc_">
     </tr> 
    <tr id="tp2">
    <input type="checkbox" id="tc_">
    </tr>

该页面还包含除复选框以外的输入元素我必须将所有复选框id的值从tc_u更改为tc_1、tc_2等等。我曾想过按如下方式做这件事

function startup(){
    for(var i=0;i<3;i++)
    {
        var elem=document.getElementById("tp"+i);
        var str=elem.innerHTML;
        str.replace(/tc_,'tc_'+i);  // how do I correctly use the arguments here?
        elem.innerHTML=str;
        //alert (""+str);
     }
 }

函数启动（）{
对于（var i=0；i而言，首先使用非唯一ID是无效的。是否有可能修复复选框的呈现方式，从而不必执行此操作
话虽如此，我不会通过操纵HTML属性来实现这一点。相反，我会通过操纵这些输入复选框的DOM属性来实现这一点：
// keep track of the current "new" checkbox ID suffix
var checkBoxIndex = 0;
for (var i = 0; i < 3; i++) {
    // find the table row
    var elem = document.getElementById("tp" + i);
    // get the input elements within that row
    var inputs = elem.getElementsByTagName("input");
    // for each of the input elements...
    for (var j = 0, k = inputs.length; j < k; j++) {
        // if it's not a checkbox, skip it
        if (inputs[j].type.toLowerCase() !== 'checkbox') {
            continue;
        }
        // Alas, give the checkbox a new, unique ID
        inputs[j].id = "tc_" + (checkBoxIndex++);
    }
}

//跟踪当前的“新建”复选框ID后缀
var checkBoxIndex=0；
对于（变量i=0；i<3；i++）{
//查找表行
var elem=document.getElementById（“tp”+i）；
//获取该行中的输入元素
var inputs=elem.getElementsByTagName（“输入”）；
//对于每个输入元素。。。
对于（var j=0，k=inputs.length；j

另外，希望您能为您的问题找到答案。这是一个糟糕的解决方法，我不希望在生产代码中看到它。
这里的技巧是使用适当的CSS选择器选择行的所有输入元素，然后修改它们的ID：
function startup() {
  for (var i = 0; i < 3;i++) {
     var elem = document.getElementById("tp" + i);

     var l = elem.querySelectorAll('td > input'); // Select "input"s in "td"s
     Array.prototype.forEach.call(l, function (e, j) { // Apply to each element obtained
       e.id = 'tc_' + j; // Modify the id
     });
  }
}

函数启动（）{
对于（变量i=0；i<3；i++）{
var elem=document.getElementById（“tp”+i）；
var l=elem.querySelectorAll（'td>input'）；//在“td”中选择“input”
call（l，函数（e，j）{//应用于获得的每个元素
e、 id='tc_'+j；//修改id
});
}
}
上面有几个很好的答案，但是如果您仍然想将id从tc_u更改为tc_i+i，那么您可以这样做
<body>
<button id="tc_">1</button>
<button id="tc_">2</button>
<button id="tc_">3</button>

<script type="text/javascript">
for(var i=0;i<3;i++)
{
document.getElementById("tc_").id="tc_"+i;
}
</script>

</body>


1.
2.
3.
对于（var i=0；iIt，首先使用非唯一ID是无效的。是否有可能修复复选框的呈现方式，从而不必执行此操作？在堆栈溢出时，HTML将在此处呈现得非常好（输入HTML，选择该HTML，然后点击{}
按钮（或“ctrl+K”），方法与您发布的JavaScript完全相同。有关更多指导，请参阅。您是否专门寻找纯JavaScript方法？我会删除所有id值，然后在此处使用jquery，因为这将是最简单的方法。我知道这不是一个理想的解决方案，id值的问题是由Sphinx造成的，我不知道对此了解很多，对我之前的问题没有任何答案，因此只是寻找解决方法，尽管这是一种糟糕的方法。很抱歉，我没有明确说明标记只是一个示例，页面还包含其他输入标记，而不仅仅是复选框。您可以在第二个for循环的内部进行检查。类似于：if（checkbox[j].type=='checkbox'）…@user2863649:查看我的编辑；我按照Katana的建议添加了一个类型检查。