Изображение воспроизведения:
Код:
JS Динамически добавлять таблицу data_2.html
Кода -копия выглядит следующим образом:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS Динамически добавляет реализацию Table Data_2 с использованием методов вставки и вставки </title>
<script type = "text/javascript">
var mailarr = [
{"title": "A C# проблема", "имя": "Zhang San", "Date": "2014-03-21"},
{"title": "проблема JavaScript", "имя": "li si", "date": "2014-03-21"},
{"title": "a c Вопрос", "Имя": "55", "Дата": "2014-03-21"},
{«Название»: «Вопрос C ++», «Имя»: «Чжао Лю», «Дата»: «2014-03-21»}
];
var tab = null;
window.onload = function () {
loadtab ();
// Выберите все
document.getElementById ("sela"). onclick = function () {
if (document.getElementbyId ("sela"). checked == true) {
seleall (tab, true);
} еще {
seleall (tab, false);
}
};
// удалить все выбранные
document.getElementById ("delsel"). OnClick = function () {
// Передача всех элементов управления вводами (кроме выбранного последнего флажести)
var chks = document.getElementsbytagname ('input');
for (var i = chks.length-2; i> = 0; i--) {
var chk = chks [i];
if (chk.checked == true) {
// Выберите обработку удаления строк
var rownow = chk.parentnode.parentnode;
rownow.parentnode.removechild (rownow);
} еще {
оповещение ("действительно");
}
}
};
};
function loadtab () {
tab = document.getElementbyId ("tb");
// Добавить метод прохождения петли Mailarr в таблицу в TR
for (var rowIndex = 0; rowIndex <mailarr.length; rowindex ++) {
// var tr = tab.insertrow (-1); //-1 относится к последней строке
var tr = tab.insertrow (tab.rows.length - 1); // вставьте в последние две строки, и последняя строка должна быть сохранена для выбранной линии.
var td1 = tr.insertcell (-1);
td1.innerhtml = "<input type = 'facebox'/>";
var td2 = tr.insertcell (-1);
td2.innerhtml = mailarr [rowindex] .title;
var td3 = tr.insertcell (-1);
td3.innerhtml = mailarr [rowindex] .name;
var td4 = tr.insertcell (-1);
td4.innerhtml = mailarr [rowindex] .date;
}
}
// Чтобы сделать кнопку Select All вступить в силу, вам необходимо пройти все ряды таблицы
функция seleall (mailtab, issel) {
для (var i = 0; i <mailtab.rows.length; i ++) {
var tr = mailtab.rows [i];
tr.cells [0] .ChildNodes [0] .CHED = ESSEL;
}
}
</script>
</head>
<тело>
<таблица id = "tb" style = "border-collapse: collapse;">
<tr>
<Th> последовательность </th>
<Th> название </th>
<Th> Отправить Mailer </th>
<Th> Отправить время </th>
</tr>
<!-Увеличение петли->
<!-Выберите все->
<tr>
<td colspan = "4">
<input id = "sela" type = "fackbox" /> <label for = "sela"> выберите все < /label>
<a href = "#" id = "delsel"> delete </a> </td>
</tr>
</table>
</body>
</html>