В данном случае, под 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>
|
|
Что та фсе читаю, читают а ответов нету :(
