0

我有一个 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);
     }
 }

谢谢。

4

3 回答 3

0

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

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

于 2013-10-09T20:05:07.537 回答
0

这里的技巧是使用适当的 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
     });
  }
}
于 2013-10-09T20:06:57.857 回答
0

上面有几个很好的答案，但是如果您仍然想将 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 是无效的。

于 2013-10-09T20:15:21.950 回答