В разработке приложений некоторая входная информация является динамической, например, опыт работы, который мы хотим зарегистрировать сотрудника, например, на следующем рисунке
Если он превращается в тупик, вы можете заполнить только три, что, если это четыре? Или больше, разве это невозможно добавить? Так что это не хорошо, мы можем динамически добавить строки таблиц, как показано на рисунке ниже, добавьте строку и введите ряд информации, которая более гибкая
Давайте посмотрим, как объединить JavaScript в ASP и ASP.NET для достижения этого эффекта:
Прежде всего, динамическое добавление таблиц реализовано на переднем плане. Когда следующая станция доступна, это может быть возможно, но Ajax может быть использован, что очень хлопотно, поэтому лучше использовать JavaScript для их реализации. Ниже приведены два способа динамического добавления строк таблиц:
Первый тип: исходный код
JavaScript:
<script type = "text/javascript">/** // * Эта функция используется для динамического добавления одной строки * tabobj: Target Table * Colnum: количество столбцов, которое в таблице в таблице * SOPOS: источник новой строки. * Targpos: позиция, где будет добавлена новая строка. * */ function addRow (tabobj, colnum, sorpos, targpos) {var ntr = tabobj.insertrow (tabobj.rows.length-targpos); // Вставьте новую строку в назначенную таблицу на назначенной должности //. var trs = tabobj.getElementsbytagname ('tr'); // Получить сбор TRS из назначенной таблицы var sortr = trs [sorpos]; // позиционировал сортр var tds = sortr.getelementsbytagname ('td'); // Получить сбор TDS из назначенной строки if (colnum == 0 || colnum == undefined || colnum == isnan) {colnum = tabobj.rows [0] .cells.length; } var ntd = new Array (); // Создать новый массив TDS для (var i = 0; i <colnum; i ++) {// traverl tds в строке ntd [i] = ntr.insertcell (); // Создать новую ячейку ntd [i] .id = tds [0] .id; // Скопировать идентификатор TD в новую ячейку. | Внимание! Суффикс TDS // должен быть назначен ntd [i] .innerhtml = tds [i] .innerhtml; // Скопировать идентификатор TD в новую ячейку. | Внимание! Суффикс TDS // должен быть назначен ntd [i] .innerhtml = tds [i] .innerhtml; // Скопируйте значение в ntd [i] innerhtml из соответствующего tds}}/** // * Эта функция используется для удаления назначенной строки в назначенной таблице * tabobj: назначенная таблица * Targpos: Положение целевой строки * btnobj: в настоящее время нажмите кнопку «Удалить изображение» */function deleterow (tabobj, targpos, btnobj) weam/remobj weam/remobj weam/remobj {/remobj {/remobj {/remobj {/remobj {/remobj {/remobj). i <tabobj.rows.length; i ++) {if (tabobj.getelementsbytagname ('img') [i] == btnobj) {tabobj.deleterow (i+targpos); }}}} </script>HTML
<table id = tabuserinfo border = 1> <tr> <td> name </td> <td> гендер </td> <td> возраст </td> <td> host </td> <td> delete </td> </tr> <tr style = "display: none" id = truserinfo> <td id = tdreernfo> usermer emernem > </td> <td id = tduserinfo> <input id = userex name = usersex> </td> <td id = tduserinfo> <input id = userage = userage> </td> <td id = tduserinfo> <inputure = use = userlove> </td> <td id = tdUsrInfo> onclick = "deleterow (document.all.tabuserinfo, 1, this)"> </td> </tr> <tr> <td> <input type = value = "add" onclick = "addrow (document.all.tabuserinfo, null, 1,1)"> </td> </tr> </tabuserinfo, null, 1,1) "> </td> </tr> </tabuserinfo, null, 1,1)"