Недавно я прочитал три книги О'Рейли, которые мы обычно называем книгами о зверях (имя одного из моих одноклассников очень похоже на мое, лол), и мне всегда хотелось сделать образец, чтобы попрактиковаться в своих навыках, потому что многие компании используют динамические формы, поэтому я попытался использовать js для создания динамической формы и использовал браузер firfox для ее отладки, потому что лучше использовать плагин firbug. Первоначально я хотел реализовать небольшую функцию, которую я не стал. Хотите сделать так много, просто нажмите кнопку, чтобы добавить строку, а затем добавлялись все больше и больше, и они становились все красивее. Опубликуйте исходный код, чтобы все могли учиться вместе. Если у вас есть вопросы, вы можете их исправить. Если вы новичок в js, будьте милосердны.
пс: Не знаю, почему номер строки не отображается выше, давно не пользовался. Заметки четко написаны, и каждый может учиться вместе.
Скопируйте код кода следующим образом:
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Динамическая таблица</title>
<style type="text/css">
тело {цвет фона: #9CC; выравнивание текста: центр}
таблица {маржа: 10 пикселей авто;}
tr th { border: 1px сплошной #096;}
td{граница: 1 пиксель, сплошной #096;}
</стиль>
<тип сценария="текст/javascript">
/*Только некоторые переменные могут быть объявлены вне функции, а методы операции использовать нельзя, поскольку нет функции для ее вызова и выполнения. */
//При загрузке страницы поместите поле выбора в заголовок таблицы, потому что оно одноразовое
window.onload = функция(){
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
вар childtd = firsttr.childNodes;
//Добавляем поле выбора в первую строку и столбец
var inp = document.createElement('input');
inp.type = 'флажок';
//Регистрация событий DOM уровня 2
catchEvent(inp,'click',function(){ //Регистрируем функцию для оценки различных состояний
если(inp.checked ==истина){
всеВыбрать();
}еще{
отменитьВыбор();
}
});
//catchEvent(inp,'click',allSelect);
//catchEvent(inp,'change',cancelSelect);
childtd[0].appendChild(inp);
}
//Добавляем строку
//var count =0;//Добавляем столбец для подсчета
функция addRow(){
//счет++;
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
вар childtd = firsttr.childNodes;
вар tr = document.createElement('tr');
вар arrtd = новый массив ();
вар arrinp = новый массив ();
for(var i =0;i<childtd.length;i++){
arrtd[i] = document.createElement('td');
arrinp[i] = document.createElement('input');
если (я == 0) {
arrinp[i].type = 'флажок';
arrinp[i].name = 'selectbox';
}иначе если(я==1){
//arrinp[i] = document.createTextNode(count);
arrinp[i] = document.createTextNode('');
}
arrtd[i].appendChild(arrinp[i]);//Подумайте, почему на вход также необходимо добавить массив.
tr.appendChild(arrtd[i]);
}
tab.appendChild(тр);
новаяСортировка();
}
//Удалить операцию
функция deleteRow(){
var ParentTr = new Array();//Сначала помещаем выбранные строки в массив
var box = document.getElementsByName('selectbox');
var tab = document.getElementById('tab');
for(var i = 0;i<box.length;i++){
if(box[i].checked==true){
вар родительский = поле [i].parentNode;
родительТр[i] = родительский.parentNode;//Если это находится прямо внутри, почему его нельзя полностью удалить? ? Это потому, что нет достаточного ответа?
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //Это удалит все выбранные элементы
if(parentTr[i]){ //Здесь нам нужно сначала определить, является ли это значение нулевым. Если оно не равно нулю, удалите его. В противном случае будет сообщено об ошибке.
tab.removeChild(parentTr[i]);
}
}
новаяСортировка();
}
//Если удаление выполнено, пересортируем
функция newSort(){
вар текст = новый массив ();
вар child_td = новый массив ();
var arr_tr = document.getElementsByTagName('tr');
for(var i = 1;i<arr_tr.length;i++){
child_td[i] = arr_tr[i].childNodes[1];//Получаем все узлы во втором столбце, начиная со второй строки
если (child_td[i].childNodes[0]){
child_td[i].removeChild(child_td[i].childNodes[0]);
}
текст[i] = document.createTextNode(i);
child_td[i].appendChild(текст[i]);
}
}
//выбираем всю операцию
функция allSelect(){
var box = document.getElementsByName('selectbox');
for(var i= 0;i<box.length;i++){
поле [я].проверено = правда;
}
}
//Отменяем все выборы
функция отменыВыбор(){
var box = document.getElementsByName('selectbox');
for(var i = 0;i<box.length;i++){
if(box[i].checked == true){
поле [я].проверено = ложь;
}
}
}
//Функция регистрации событий
функция catchEvent(eventobj,event,eventHandler){
если (eventobj.addEventListener) {
eventobj.addEventListener(событие,eventHandler,false);
}иначе если(eventobj.attachEvent){
событие = 'включено'+событие;
eventobj.attachEvent(событие,eventHandler);
}
}
//catchEvent(add,'click',addRow);
</скрипт>
</голова>
<тело>
<h3>Динамическая таблица</h3>
<input type="button" value="Add" id="add" onclick="addRow()" />
<input type="button" value="Выбрать все" onclick="allSelect()" />
<input type="button" value="Отменить все" onclick="cancelSelect()" />
<input type="button" value="Delete" id="delete" onclick="deleteRow()"/>
<table id="tab" cellpadding="5px" cellpacing="0px">
<tr><td></td><td>Серийный номер</td><td>Вопрос первый</td><td>Вопрос второй</td><td>Вопрос третий</td></tr>
</таблица>
</тело>
</html></span>