Замена подстроки в JavaScript innerHTML

У меня есть страница HTML, которая содержит строки таблицы, какЗамена подстроки в JavaScript innerHTML

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

страница содержит, кроме флажков, а входных элементов, которые я должен изменить значение идентификатора всех CheckBox от 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); 
    } 
}

Спасибо.

источник

2013-10-09 user2863649

Неверно, чтобы иметь уникальные идентификаторы в первую очередь. Есть ли вероятность, что вы можете установить, как эти флажки отображаются, так что вам не нужно это делать? –

HTML будет отлично отображаться здесь при переполнении стека (введите HTML-код, выберите этот HTML-код и нажмите кнопку '{}' (или 'ctrl + K')) точно так же, как и JavaScript, который вы опубликовали. Подробнее см. В [edit help] (http://stackoverflow.com/editing-help/). –

Вы специально ищете чистый javascript способ сделать это? Я бы сбросил все значения id, а затем использовал jquery здесь, поскольку это будет самый простой способ. – jhnlsn

Неверно иметь уникальные идентификаторы в первую очередь. Есть ли вероятность, что вы можете установить, как эти флажки отображаются, так что вам не нужно это делать?

Это, как говорится, я не сделал бы этого, манипулируя атрибутами 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. Это ужасное обходное решение, и мне бы очень хотелось увидеть его в производственном коде.

источник

2013-10-09 20:05:07

Прошу прощения, я не прояснил, что разметка - это всего лишь образец, страница содержит и другие теги ввода, а не только флажки – user2863649

Возможно, вы сможете поставить чек на внутреннюю часть второго цикла for-loop , Что-то вроде: if (флажки [j] .type === 'checkbox') ... – Katana314

@ user2863649: Смотрите мои правки; Я добавил проверку типа, предложенной Катаной. –

Хитрость здесь, чтобы выбрать все элементы ввода ваших строк, используя соответствующий селектор CSS, а затем изменить их идентификаторы:

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-09 20:06:57 Noe

Там же несколько хороших ответов выше, но если вы все еще хотите изменить идентификатор из tc_ to 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>

Честно, хотя вы не должны делать это так, несмотря на то, что данный код работает как и другие пользователи сказали, что это не действует, чтобы иметь неуникальными идентификаторы.

источник

2013-10-09 20:15:21 user1205406

Замена подстроки в JavaScript innerHTML

ответ

Смежные вопросы