Мне нужен идентификатор и имя внутреннего элемента при клонировании строки таблицы с помощью JavaScript

0

При ударе zoneensornewline_button в таблицу создается и добавляется новая строка. Я могу изменить идентификатор строки, но все новые dropdownbox в этой строке теперь имеют id = "selectedArea0", id = "selectedSensor0" и name = "AreaBinding0", name = "sensorBinding0". Они должны быть 1, 2 и так форт. Любая помощь будет очень признательна !!!!

    <table border="0" id="areasensor_table">
        <tr id="areasensor_row0">
            <td id="area_column0">
                <select name="areaBinding0" id="selectedArea0"> @for(area <- areas) {
                    <option value="@area.uniqueid">@area.name</option>}
                </select>
            </td>
            <td id="sensor_column0">
                <select name="sensorBinding0" id="selectedSensor0"> @for(sensor <- sensors) {
                    <option value="@sensor.id">@sensor.name</option> } 
                </select>
            </td>
            <td>
                <a class="glyphicon glyphicon-plus" id="areasensornewline_button"></a>
            </td>
        </tr>
    </table>
    <p>
    <p>
<script>
var q = 1;
document.getElementById('areasensornewline_button').onclick = cloneRowAreaSensor;

function cloneRowAreaSensor() {
    var row = document.getElementById('areasensor_row0'); // find row to copy
    var table = document.getElementById('areasensor_table'); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    var innerClone = row.innerHTML;
    clone.id = 'areasensor_row' + q; // change id or other attributes/contents
    q++;
    table.appendChild(clone); // add new row to end of table
}
</script>
Теги:

2 ответа

1
Лучший ответ

Трюк состоит в том, чтобы использовать регулярное выражение, но далеко не идеальное...

        function cloneRowAreaSensor() {
            var row = document.getElementById('areasensor_row0'); // find row to copy
            var table = document.getElementById('areasensor_table'); // find table to append to
            var clone = row.cloneNode(true); // copy children too
            clone.innerHTML = clone.innerHTML.replace(/0"/g, q + '"');
            clone.id = 'areasensor_row' + q; // change id or other attributes/contents
            q++;
            table.appendChild(clone); // add new row to end of table
        }

Добавленная строка помещается вне тега html tbody. Вы действительно должны использовать jQuery, il поможет вам много.

  • 0
    Спасибо вам большое! Вы просто сэкономили мне много времени :).
0

Ваш код работает только в первый раз. Создайте счетчик, чтобы использовать элемент name.

Пример:

var count = 1;
for(i = 0; i<= 10; i++){
var row = document.getElementById('areasensor_row'+ count +'');
}

Это простой пример. Вам нужно перестроить свой код, как в этом примере. (Этот cicle для is not лучший пример, но он работает на 10 элементах)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню