VPF::Динамическое редактирование id полей

BuShaRt

Дата 25.4.2007, 15:06 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6

В данном случае, под id я подразумеваю по большей часте не атрибут id, а скорей порядковый номер хотя тут они взаимосявязанны.

Есть вот такой скриптик, цель которого предоставить пользователю редактировать и дополнять таблицу без перезагрузки страницы (AJAX потом подключать начну).

Все в целом работает, но есть одно НО... Проблемы с удалением вновь добавленных строк... Проблемы возникает из-за того, что строки добвляються на лету, а удаление происходит по порядковому номеру т.е. чтоб строки грамотно удалялись, при добавление им нужно прораммно задавать порядковый номер динамично... я очень не силен с JS и сам врядле с этой задачей справлюсь

Кроме того, буду очень рад, если сие *творение* покретикуют в плане валидности кода ;)

Код


<html><head><title>AutoSaveTable</title>
<script> 
document.onclick = function (e) {
    e = e || window.event;                                         
    var el = e.target || e.srcElement;
    if (el.getAttribute("trans_text")) {
        var input = document.createElement("input");
        input.setAttribute("type","text");
        input.setAttribute("size","15");
        input.setAttribute("value", el.textContent || el.innerText);
        el.parentNode.replaceChild(input,el);
    } 
    if (el.getAttribute("button_add")) {
        row = autotable.insertRow(1);
        row.setAttribute("id","row3");
        cell1 = row.insertCell(0);
        cell1.setAttribute( "height", "50" );
        cell1.setAttribute( "align", "center" );  
            var input = document.createElement("input");
            input.setAttribute("type","checkbox");
            input.setAttribute("value","3");
            input.setAttribute("name","del_me[]");
            cell1.appendChild(input);    
        cell2 = row.insertCell(0);
        cell2.setAttribute( "height", "50" );
        cell2.setAttribute( "align", "center" ); 
            var input = document.createElement("input");
            input.setAttribute("type","text");
            input.setAttribute("size","15");
            input.setAttribute("value", el.textContent || el.innerText);
            cell2.appendChild(input);        
        cell3 = row.insertCell(0); 
        cell3.setAttribute( "height", "50" );
        cell3.setAttribute( "align", "center" ); 
            var input = document.createElement("input");
            input.setAttribute("type","text");
            input.setAttribute("size","15");
            input.setAttribute("value", el.textContent || el.innerText);
            cell3.appendChild(input);    
        cell4 = row.insertCell(0); 
        cell4.setAttribute( "height", "50" );
        cell4.setAttribute( "align", "center" ); 
            var input = document.createElement("input");
            input.setAttribute("type","text");
            input.setAttribute("size","15");
            input.setAttribute("value", el.textContent || el.innerText);
            cell4.appendChild(input);    
    }   
    if (el.getAttribute("button_del")) {
        var arr_del_me = document.getElementsByName('del_me[]');
        var len = arr_del_me.length;
        var tab = document.getElementById('autotable');
        var tb = tab.getElementsByTagName('TBODY')[0];
        var chds = new Array(len);
        var ids = new Array(len);
    
        for(var i=0; i<len; i++){
            chds[i] = arr_del_me[i].checked;
            ids[i] = arr_del_me[i].value;
        }
    
        for(var i=0; i<len; i++)
            if(chds[i])
                tb.removeChild(document.getElementById("row"+ids[i]));
    }
};
</script></head>
<body id='body'>
<table border="1" width="100%" id='autotable'>
<thead>
    <tr>
        <td height="50" align="center">Имя</td>
        <td height="50" align="center">Отчество</td>
        <td height="50" align="center">Фамилия</td>
        <td height="50" align="center"><input button_del='1' type='button' value='Удалить'><input button_add='1' type='button' value='Добавить'></td>
    </tr>
</thead>
<TBODY>
    <tr id="row1">
        <td height="50" align="center"><div trans_text="1" >Иван</div></td>
        <td height="50" align="center"><div trans_text="1">Иванович</div></td>
        <td height="50" align="center"><div trans_text="1">Иваненко</div></td> 
        <td height="50" align="center"><input type="checkbox" value="1" name="del_me[]"></td>
    </tr>
    <tr id="row2">
        <td height="50" align="center"><div trans_text="1">Петр</div></td>
        <td height="50" align="center"><div trans_text="1">Петрович</div></td>
        <td height="50" align="center"><div trans_text="1">Петроченко</div></td>    
        <td height="50" align="center"><input type="checkbox" value="2" name="del_me[]"></td>
    </tr>
</TBODY>
</table>
</body></html>

BuShaRt

Дата 25.4.2007, 17:14 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6

Что та фсе читаю, читают а ответов нету :(

SelenIT

Дата 26.4.2007, 04:46 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Проверил - вот такое уделение работает:

Код


    if (el.getAttribute("button_del")) {
        var tab = document.getElementById('autotable'), i = 0;
        while(tab.rows[i]){
            var inps = tab.rows[i].getElementsByTagName('input');
            if (inps[inps.length-1].checked) tab.deleteRow(i);
            else i++;
        }
    }

Правда, тут есть зависимость от вёрстки (привязка к тому, что чекбокс - последний input в строке), но её не так сложно устранить.

P.S. Загадочно, что в IE диннамически созданные input-ы не заносятся в document.getElementsByName('del_me[]'), хотя прекрасно заносятся в getElementsByTagName('input')...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

BuShaRt

Дата 26.4.2007, 11:09 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1391
Регистрация: 29.6.2006

Репутация: нет
Всего: 6

SelenIT,
Классно, спасибо, все работает smile

SelenIT

Дата 26.4.2007, 12:12 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Кажись, разобрался с IE: этому "чуду враждебной техники", оказывается, для работы getElementByName по какой-то странной прихоти необходим атрибут id, непременно в точности совпадающий со значением name (напр., пост от 19.01.2006 тут и ещё вот). Почему так сделано - непонятно...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

AKS

Дата 26.4.2007, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

SelenIT, хочу кое-что добавить по-поводу "Загадочно, что в IE диннамически созданные input-ы не заносятся в document.getElementsByName()".
На одном из форумов, где мы с Вами бываем (не помню точно какой), подобная тема была раскрыта. Вот, что нужно IE для того, чтобы элемент попал в упомянутую выше коллекцию:

Код


var input = document.createElement("<input name='del_me[]'>");

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »