替換JavaScript innerHTML中的子字符串

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

另外，希望您能回答其他問題。 這是一個糟糕的解決方法，我不希望在生產代碼中看到它。

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 個解決方案

解決方案1
0 已采納 2013-10-09 20:05:07

解決方案2
0 2013-10-09 20:06:57

解決方案3
0 2013-10-09 20:15:21

替換JavaScript innerHTML中的子字符串

問題描述

3 個解決方案

解決方案1 0 已采納 2013-10-09 20:05:07

解決方案2 0 2013-10-09 20:06:57

解決方案3 0 2013-10-09 20:15:21

解決方案1
0 已采納 2013-10-09 20:05:07

解決方案2
0 2013-10-09 20:06:57

解決方案3
0 2013-10-09 20:15:21