Question

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

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

该页面还包含复选框以外的输入元素我必须将所有复选框id的值从tc_更改为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);
     }
 }

感谢。

Answer 1

首先拥有非唯一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++);
    }
}

另外，希望您能得到other question的答案。这是一个糟糕的解决方法，我不想在生产代码中看到它。

Answer 2

这里的技巧是使用适当的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
     });
  }
}

Answer 3

上面有几个很好的答案，但是如果你仍想将id从tc_更改为tc_ + 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>

老实说尽管你不应该像这样做，尽管这个代码可以正常工作，因为其他用户已经说过拥有非唯一ID是无效的。

替换JavaScript innerHTML中的子字符串

3 个答案: