| |
|
|
| | У меня таблица с одной строкой при загрузке страницы.
Если я хочу добавить линию снизу, то я нажимаю на кнопку Add Row и появляется точно такая-же линия (копия) снизу.
// - The new row function
var i=0;
function addRow(){
var table = document.getElementById("table1");
var tbody = document.getElementById("table1").tBodies[0];
var row = document.createElement("TR");
//Cell 1
var cell1 = document.createElement("TD");
var inp1 = document.createElement("INPUT");
inp1.setAttribute("type","checkbox");
inp1.setAttribute("name","list");
inp1.setAttribute("value", i);
cell1.appendChild(inp1);
//Cell 2
var cell2 = document.createElement("TD");
cell2.setAttribute("align","center");
var inp2 = document.createElement("INPUT");
inp2.setAttribute("type","text");
inp2.setAttribute("name","bmk_name" + i);
cell2.appendChild(inp2);
//Cell 3
var cell3 = document.createElement("TD");
cell3.setAttribute("align","center");
var inp3 = document.createElement("TEXTAREA");
inp3.setAttribute("name","bmk_description" +i);
inp3.setAttribute("cols","20");
inp3.setAttribute("rows","3");
cell3.appendChild(inp3);
//Cell 4
var cell4 = document.createElement("TD");
cell4.setAttribute("align","center");
cell4.innerHTML="<select name='cbo_category' +i >" +
"<option>Computer</option>" +
"<option>Graphic Design</option>" +
"<option>Electronic Libraries</option>" +
"</select>";
//Cell 5
var cell5 = document.createElement("TD");
cell5.setAttribute("align","center");
cell5.innerHTML="<select name='cbo_language' +i >" +
"<option>English</option>" +
"<option>French</option>" +
"<option>Russian</option>" +
"</select>";
//Cell 6
var cell6 = document.createElement("TD");
cell6.setAttribute("align","center");
var inp6 = document.createElement("INPUT");
inp6.setAttribute("type","text");
inp6.setAttribute("name","bmk_link" +i);
cell6.appendChild(inp6);
//
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
tbody.appendChild(row);
table.appendChild(tbody);
i++;
//alert("i= " +i);
//alert(row.innerHTML);
}
|
<form name="form1" id="form1" method="post" action="manage_bookmarks.php">
<div>
<input name="add_row" type="button" id="add_row" value="Add Row" onclick="addRow()" />
<input name="del_row" type="button" id="del_row" value="Remove Row" onclick="delRow(this)"/>
<input name="submit" type="submit" value="Add Record"/>
</div>
<table id="table1" width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr>
<th bgcolor="#660066"><input type="checkbox" name="check_all" value="check_all" onclick="checkAll(this.form)"/></th>
<th bgcolor="#0000FF"><span class="style1">Name</span></th>
<th bgcolor="#0000FF"><span class="style1">Description</span></th>
<th bgcolor="#0000FF"><span class="style1">Category</span></th>
<th bgcolor="#0000FF"><span class="style1">Language</span></th>
<th bgcolor="#0000FF"><span class="style1">Link</span></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="list" value="1" /></td>
<td align="center"><input type="text" name="bmk_name"/></td>
<td align="center"><textarea name="bmk_description" cols="20" rows="3"></textarea></td>
<td align="center">
<select name="bmk_category" id="bmk_category" >
<?php while ( $list = mysql_fetch_array( $result ) ) { ?>
<option value="<?php print($list['Category_Name']);?>"><?php print($list['Category_Name']);?></option>
<?php } ?>
<?php mysql_free_result($result);?>
</select>
</td>
<td align="center">
<select name="bmk_language" id="bmk_language">
<option value="en">English</option>
<option value="fr">French</option>
<option value="ru">Russian</option>
</select>
</td>
<td align="center"><input name="bmk_link" type="text" id="bmk_link" /></td>
</tr>
</tbody>
<tfoot><tr><td></td></tr></tfoot>
</table>
<p> </p>
</form>
|
Добавка вроде работает, но если после добавления дополнительных линий посмотреть Source страницы в браузере, там стоит только одна линия, которая была при загрузке.
Как это понимать?
Второе, на каждой линии у меня стоит checkbox, я хочу удалять выбранные линии из таблицы. Но как это сделать?
Спасибо. | |
| |
|
|
| |
|
|
| |
для: codexomega
(23.08.2005 в 18:42)
| | | 1. всё остальное хранится в памяти браузера.
2. document.getElementById("table1").deleteRow(n)
где n-номер строки таблицы, отсчёт начинается с верху (кажется) | |
| |
|
|
| |
|
|
| |
для: Crux
(24.08.2005 в 13:29)
| | | Спасибо.
Но мне нужно еще выяснить какая строка выбранна для удаления.
Для этого я раставил checkbox. Проблема в том что при добавлении новых линий в таблицу, почему то скрипт не находит добавленных чекбоксов.
Вот небольшая функция для проверки количества коробок и тех, которые с галочками.
function delRow(){
var v_checkbox = document.getElementsByName("list");
var nb_checked = 0;
alert("checkboxes: " + v_checkbox.length);
for(i = 0 ; i < v_checkbox.length; i++){
if(v_checkbox(i).checked == true)
nb_checked++;
}
alert("nb_checked: " + nb_checked);
}
|
Код видит только первую строку таблицы, а остальные игнорирует... | |
| |
|
|
| |
|
|
| |
для: codexomega
(24.08.2005 в 17:50)
| | | вообще, как вы знаете,для того,чтобы различать ,например,элементы формы,им нужно присвоить что-то,по чему их можно различать...в JS это name и id .
я думаю,что лучше присваивать им не name, а id.
скрипт не находит новых чекбоксов,потому что при вызове ф-ции addRow() у вас создаются чекбоксы с одинаковыми именами (в данном случае с именем list).
вам нужно изменить код,чтобы создавались чекбоксы с разными именами...подумайте...это можно реализовать :)
и ,соответственно, в ф-ции delRow() не нужно указывать конкретное имя (list) ;
я бы изменил
var v_checkbox = document.getElementsByName("list");
|
на что-то типа этого:
var v_checkbox = document.getElementsById(id);
|
где id можно получить так:
id = event.srcElement.id;
|
при клике (или как угодно) по элементу
удачи | |
| |
|
|
| |
|
|
| |
для: servannin
(24.08.2005 в 18:19)
| | | Одинаковое имя list, потому что это имя группы в которую входят все чекбоксы.
Если я поставлю еще несколько чекбоксов, для теста, рядом с первым, на первой строке при загрузке страницы, по умолчанию, т.е не методом динамической добaвки, при нажатии кнопки Add Row, тогда мой код работает, распознает колличество чекбоксов относящихся к данной группе, под названием list а также распознает количество тех, которые отмеченны. | |
| |
|
|
| |
|
|
| |
для: codexomega
(24.08.2005 в 18:42)
| | | у чекбоксов одинаковые имена не должны быть, это не радиобутоны. | |
| |
|
|
| |
|
|
| |
для: codexomega
(23.08.2005 в 18:42)
| | | Короче вы все ошибаетесь.
Чекбоксы точно также входят в группы как и радиобутоны.
Не знаю что я сделал, но мой скрипт вдруг заработал.
А, да я вместо name поставил id но название оставил для всех одинаковое list.
Итак, скрипт выводит колличество чекбоксов а также выдает сколько отмеченных.
function delRow(){
//get checked lines
var v_checkbox = document.getElementsByName("list");
var nb_checked = 0;
alert("checkboxes: " + v_checkbox.length);
for(k = 0 ; k < v_checkbox.length; k++){
if(v_checkbox[k].checked == true){
nb_checked++;
//document.getElementById("table1").deleteRow(?);
}
}
alert("nb_checked: " + nb_checked);
|
Не знаю теперь как стереть линии именно с отмеченными чекбоксами.
Сижу, смотрю на код и ни фига не понимаю.
Короче до меня не доходит.
Помогите пожалуйста если видите ответ.
Спасибо. | |
| |
|
|
| |
|
|
| |
для: codexomega
(26.08.2005 в 07:21)
| | | 1. с учётом того что ваша функция не работае, то утверждение, что: Короче вы все ошибаетесь - это абсурд.
2. помогаю
function delRow()
{
//get checked lines
var n_checkbox = document.getElementById("table1").tBodies[0].childNodes
for(k = 0 ; k < n_checkbox.length; k++)
if(n_checkbox[k].childNodes[0].childNodes[0].checked == true)
document.getElementById("table1").tBodies[0].deleteRow(k);
}
|
| |
| |
|
|
| |
|
|
| |
для: Crux
(27.08.2005 в 19:55)
| | | Огромное спасибо!
Теперь всё работает как надо.
Выручили. | |
| |
|
|
| |
|
|
| |
для: codexomega
(23.08.2005 в 18:42)
| | | Я посчитал уже было тему закрытой, но маленькая проблемка, пока только одна...
Дело в том что данная функция:
function delRow(){
// get checked lines
var n_checkbox = document.getElementById("table1").tBodies[0].childNodes
alert("nb_rows: " + n_checkbox.length);
// initialize k = 1 to prevent removing first row
for(k = 1 ; k < n_checkbox.length; k++){
if(n_checkbox[k].childNodes[0].childNodes[0].checked == true)
document.getElementById("table1").tBodies[0].deleteRow(k);
}
}
|
Не убирает одним махом все выделенные линии, а каждый раз приходится кликать на кнопку чтобы стирать по одной линии.
Вроде процедура находится в цикле, так что теоретически должна работать, но на практике - нет... | |
| |
|
|
| |
|
|
| |
для: codexomega
(29.08.2005 в 06:22)
| | | помменяйте условия цикла
for(k = n_checkbox.length-1 ; k >0 ; k--)
|
| |
| |
|
|
| |
|
|
| |
для: Crux
(29.08.2005 в 07:10)
| | | Теперь работает.
Никогда бы не додумался.
Ещё раз спасибо. | |
| |
|
|
