В этой статье описывается полный метод реализации управления пожертвованиями JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Страница index.html выглядит следующим образом:
Скопируйте код следующим образом: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS Management </title>
<link href = "css/css.css" rel = "stylesheet" type = "text/css"/>
<script type = "text/javascript">
// массив пожертвованных подразделений
var ocleorgs = [
{"id": "1", "comname": "One Foundation"},
{"id": "2", "comname": "Song Ching Ling Fund"},
{"id": "3", "comname": "tzu Chi Foundation"},
{"id": "4", "comname": "Красный Крест"},
{"id": "5", "comname": "Wolf totem"}
];
// Динамически добавить анонимный метод в объект массива Distorgs
distorgs.getorgsbyid = function (id) {
for (var i = 0; i <distorgs.length; i ++) {
if (distorgs [i] .id == id) {
return lectorgs [i]; // возвращать объект
}
}
};
// массив данных о пожертвованиях
var ListData = [
{"id": "1", "pername": "Jackie Chan", "orgid": "1", "Money": "10000", "Date": "2012-3-3"},
{"id": "2", "pername": "jet li", "orgid": "2", "Money": "10000", "Date": "2012-3-3"},
{"id": "3", "pername": "Chen guangbiao", "orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "4", "pername": "hu jintao", "orgid": "1", "Money": "10000", "Дата": "2012-3-3"},
{"id": "5", "pername": "Zhou Singchi", "orgid": "2", "Money": "10000", "Date": "2012-3-3"},
{"id": "6", "pername": "Dawn", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "7", "pername": "оборотня", "orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "8", "pername": "Madman", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"},
{"id": "9", "pername": "Три сумасшедшего", "Orgid": "3", "Money": "10000", "Date": "2012-3-3"}}
];
// массив запросов на страницы
ListData.fenyequery = function (pagenow, pageize) {
var res = new Array ();
// 1. Нажмите PageSize.
// Третья страница-ListData [10] -ListData [14]
var start = (pagenow - 1) * pagesize;
var end = listdata.length> (pagenow * pageSize)? (Pagenow * pagesize): listdata.length;
для (var i = start; i <end; i ++) {
res [res.length] = listData [i];
}
вернуть Res;
};
ListData.QueryByorid = function (orid) {
var arr = new Array ();
for (var i = 0; i <listdata.length; i ++) {
if (listdata [i] .orgid == orid) {
arr [arr.length] = listdata [i];
}
}
возврат Arr;
};
listData.idnum = listData.length;
ListData.Addrec = function (rec) {
listData.idnum ++;
var newRec = {"id": listdata.idnum, "pername": rec.pername, "orgid": rec.orgid, "money": rec.money, "date": rec.date};
ListData [listData.length] = newRec;
вернуть NewRec;
};
ListData.updaterec = function (obj) {
for (var i = 0; i <listdata.length; i ++) {
if (listdata [i] .id = obj.id) {
ListData [i] = obj;
перерыв;
}
}
};
// Определите глобальную переменную, чтобы обнаружить, отменить ли личность
var iScancelupdate = false;
// Определите три элемента управления вводом текста
var inputPername = document.createElement ("input");
InputPername.type = "text";
var inputmoney = document.createElement ("input");
InputPername.type = "text";
var inputDate = document.createElement ("input");
InputPername.type = "text";
var seleteorg = document.createElement ("select");
ListData.DelrecbyId = function (id) {
for (var i = 0; i <listdata.length; i ++) {
if (listdata [i] .id == id) {
//удалить
/*
1. Начните с места, где находится этот идентификатор, и перемещайте каждый элемент по одному за другой
2. Последний элемент повторяется, и его нужно очистить
*/
for (var j = i; j <listdata.length - 1; j ++) {
ListData [j] = listData [j + 1];
}
}
}
ListData.length = listData.length - 1;
};
// обменивать текст в текстовое поле ввода
Функция txttoinput (tdname, inputname) {
tdname.setattribut
inputname.value = tdname.innerhtml;
tdname.appendchild (inputname);
tdname.removechild (tdname.firstchild);
}
функция txttoselect (tdname, selobj) {
tdname.appendchild (selobj);
tdname.removechild (tdname.firstchild);
selobj.value = tdname.getattribute ("orgid");
}
функция selectortext (tdname) {
var orid = seleteorg.value;
var orgname = lectorgs.getorgsbyid (orid) .comname;
// tdname.setattribute ("orgid", seleteorg.value);
tdname.innerhtml = orgname;
}
// повернуть ввод обратно в текст
функция inputTotxt (tdname, inputName) {
// Если нажать отменить
if (iscancelupdate) {
tdname.innerhtml = tdname.getattribute ("oldvalue");
возвращаться;
}
// Нажмите, чтобы подтвердить, чтобы изменить
tdname.innerhtml = inputname.value;
}
// Измените обратно выберите «Управление» на текст
функция seletOtxtx (tdname, selname) {
// tdname.appendchild (selname);
var orgid = seleteorg.value;
// удалить предыдущий
tdname.innerhtml = (distorgs.getorgsbyid (orgid)). comname;
}
// Отмена модификации
Отмена функции (OBJ) {
iscancelupdate = true; // Нажмите отмена
Docancel (OBJ);
iscancelupdate = false;
}
Функция Docancel (obj) {
var trcur = obj.parentelement.parentelement;
var tds = trcur.childnodes;
// все используют значения ниже исходного TD (сохранение в атрибуте)
tds [1] .innerhtml = tds [1] .getAttribute ("OldValue");
tds [2] .innerhtml = distorgs.getorgsbyid (tds [2] .getattribute ("orgid")). comname;
tds [3] .innerhtml = tds [3] .getAttribute ("OldValue");
tds [4] .innerhtml = tds [4] .getattribute ("oldvalue");
tds [5] .innerhtml = "<a href = '#' onclick = 'delobj (this)'> delete </a> <a href = '#' onclick = 'upobj (this)'> modify </a>";
// iscancelupdate = false;
// после подтверждения того, что отмена успешна, установите Trcur на NULL
trcur = null;
}
var trcur = null;
Функция upobj (obj) {
if (trcur! = null) {
// указывает, что в состоянии редактирования существует линия, и ее модификация должна быть отменена
iscancelupdate = true;
// Отмена редактирования этой линии
Docancel (trcur.childnodes [5]. Firstchild); // trcur.childnodes [5]. Пелика
}
// Получить текущую строку
trcur = obj.parentelement.parentelement;
var tds = trcur.childnodes;
// Модификация ввода донора
txttoinput (tds [1], inputpername);
//Количество
txttoinput (tds [3], inputmoney);
// дата пожертвования
txttoinput (tds [4], inputdate);
// Потянуть вниз, чтобы выбрать устройство
txttoselect (tds [2], seleteorg);
// Измените ссылку на отмену
tds [5] .innerhtml = "<a href = '#' onclick = 'doupobj (this)'> ok </a> <a href = '#' onclick = 'Cancelup (this)'> cancel </a>";
}
// Подтверждение изменения
функция doupobj (obj) {
iscancelupdate = false;
trcur = obj.parentelement.parentelement;
// 1. Изменить соответствующие записи в массиве
var rec = {"id": trcur.childnodes [0] .innerhtml, "pername": trcur.childnodes [1] .childnodes [0]. trcur.childnodes [3] .childnodes [0].
// вызов метода для изменения соответствующих записей в ListData
ListData.updaterec (rec);
// 2. Изменить записи в таблице
Inputtotxt (trcur.childnodes [1], inputpername);
seletotxt (trcur.childnodes [2], seleteorg);
Inputtotxt (trcur.childnodes [3], inputmoney);
Inputtotxt (trcur.childnodes [4], inputdate);
trcur.childnodes [5] .innerhtml = "<a href = '#' onclick = 'delobj (this)'> delete </a> <a href = '#' onclick = 'upobj (this)'> modify </a>";
//trcur.childnodes=2^.setattribute("orgid ", seleteorg.value);
// после подтверждения того, что модификация является успешной, установите Trcur на NULL
trcur = null;
}
// удалить линию данных
функция delobj (obj) {
// удалить соответствующий массив в массиве
//1. Чтобы получить выбранную строку
var curtr = obj.parentelement.parentelement;
// 2. Получите значение ID из первого столбца
var delid = curtr.cells [0] .innerhtml;
// window.alert (delid);
// 3. Удалить запись на основе ID (ListData в массиве)
ListData.delrecbyid (Delid);
// 4. Удалить отображаемые строки в представлении таблицы
curtr.parentelement.removechild (curtr);
}
Функциональный гель (id) {
return document.getElementbyId (id);
}
// 1. Запросите привязку имени блока, Selele: Nelet Element Node
Функция LoatorGglist (selele) {
for (var i = 0; i <distorgs.length; i ++) {
var opt = new Option (distorgs [i] .comname, distorgs [i] .id);
selele.options.add (opt);
}
}
// 2. Методы связывания таблиц и таблиц связывания и списков
function LoadDatalist () {
// for (var i = 0; i <listdata.length; i ++) {
// addRow (listData [i]);
//}
// Дисплей на странице
ShowPage ();
}
функция addrow (obj) {
var trnew = gel ("tblist"). insertrow (-1);
var tdnew = trnew.insertcell (-1);
tdnew.innerhtml = obj.id;
trnew.insertcell (-1) .innerhtml = obj.pername;
var trorgname = trnew.insertcell (-1);
trorgname.setattribute ("orgid", obj.orgid);
trorgname.innerhtml = (distorgs.getorgsbyid (obj.orgid)). comname;
trnew.insertcell (-1) .innerhtml = obj.money;
trnew.insertcell (-1) .innerhtml = obj.date;
trnew.insertcell (-1) .innerhtml = "<a href = '#' onclick = 'delobj (this)'> delete </a> <a href = '#' onclick = 'upobj (this)'> modify </a>";
}
window.onload = function () {
// Перевязывающий запрос
Loktorgglist (гель ("selsearchorg"));
// Связывать пожертвованное устройство
LoportRglist (гель ("seladdorg"));
Loktorgglist (seleteorg);
// Связывание таблицы и списка
LoadDatalist ();
// Добавить новую кнопку, чтобы связать событие
гель ("btnadd"). onclick = function () {
if ((! (Gel ("txtname"). Value)) || (! (Gel ("txtmoney"). Value) || (! (Gel ("txtdate"). value)))) {
оповещение («Ввод не может быть пустым»);
возвращаться;
}
// 1. Получите входное содержимое и упакуйте его в объект (в соответствии с форматом ListData)
var arr = {"pername": gel ("txtname"). value, "orgid": gel ("seladdorg"). Value, "money": gel ("txtmoney").
// 2. Добавить в список списков
var res = listData.addrec (arr);
// 3. Отображается в таблице
var trnew = gel ("tblist"). insertrow (-1);
trnew.insertcell (-1) .innerhtml = res.id;
trnew.insertcell (-1) .innerhtml = res.pername;
var tdorg = trnew.insertcell (-1);
tdorg.setattribute ("orgid", res.orgid);
tdorg.innerhtml = distorgs.getorgsbyid (res.orgid) .comname;
trnew.insertcell (-1) .innerhtml = res.money;
trnew.insertcell (-1) .innerhtml = res.date;
trnew.insertcell (-1) .innerhtml = "<a href = '#' onclick = 'delobj (this)'> delete </a> <a href = '#' onclick = 'upobj (this)'> modify </a>";
};
// Связание события с кнопкой запроса
гель ("btnsearch"). onclick = function () {
if (gel ("selsearchorg"). value == -1) {
возвращаться;
}
// 1. Получите запрос Оргид донорского подразделения
var orgid = gel ("selsearchorg"). value;
// 2. Определите метод, основанный на Orgid Query в массиве ListData и вызовите его здесь
var arrres = listdata.querybyorid (orgid);
// 3. Снимите старые данные таблицы с дисплея, обязательно очистите дисплей снизу вверх
var trs = gel ("tblist"). Rows;
for (var j = trs.length-1; j> 0; j--) {
гель ("tblist"). DeLeterow (j);
}
// 4. Показать новые данные
for (var i = 0; i <arrres.length; i ++) {
addrow (arrres [i]);
}
};
// Связайте события на предыдущей странице
гель ("btnprepage"). onclick = function () {
if (pagenow> 1) {
Pagenow--;
ShowPage ();
} еще {
Alert («Это уже первая страница!»)
}
};
// Связайте события на следующей странице
гель ("btnnextpage"). onclick = function () {
if (pagenow <listdata.length/pagesize)
{
Pagenow ++;
ShowPage ();
}еще
{
оповещение («Это уже последняя страница!»);
}
};
};
var pagenow = 1;
var pagesize = 5;
function showPage () {
var trs = gel ("tblist"). Rows;
for (var j = trs.length-1; j> 0; j--) {
гель ("tblist"). DeLeterow (j);
}
// 1. Вернуть массив в соответствии с Pagenow и PageSize
var res = listData.fenyequery (pagenow, pageSize);
for (var i = 0; i <res.length; i ++) {
addrow (res [i]);
}
}
</script>
</head>
<тело>
<div id = "контейнер">
<h1> Управление пожертвованиями </h1>
<div>
Донорский подразделение
<select id = "selsearchorg">
<option value = "-1">-Пожалуйста, выберите-</option>
</select>
<input type = "кнопка" id = "btnsearch" value = "Query" /> <input type = "value =" предыдущая страница "id =" btnprepage " /> <input type =" кнопка "value =" stear page "id =" btnnextPage " /> <span =" pageBar "> < /span> id =" btnnextPage " /> <span =" pageBar "> < /span>
</div>
<div>
Донор: <input type = "text" id = "txtname" size = "8" />
Полученная донорская единица:
<select id = "seladdorg">
</select>
Сумма: <input type = "text" id = "txtmoney" size = "8" />
Дата пожертвования: <input type = "text" id = "txtdate" size = "10" />
<input type = "кнопка" id = "btnadd" value = "new" />
</div>
<таблица id = "tblist" cellpacing = "0" cellpadding = "0">
<tr>
<Td> серийный номер </td>
<Td> донор </td>
<Td> Пожертвованный блок </td>
<td> сумма </td>
<TD> Дата пожертвования </td>
<TD> Операция </td>
</tr>
</table>
</div>
</body>
</html>
css.css выглядит следующим образом:
Скопируйте код следующим образом:* {
поля: 0px;
Заполнение: 0px;
}
тело {
Ширина: 900px;
Полевая: 0PX Auto;
надоеволок: 20px;
}
H1 {
Заполнение: 15px;
Текст-альбом: Центр;
}
#container {
Ширина: 900px;
Высота: Авто;
}
.Header, .search {
Ширина: 900px;
Высота: 30px;
высота линии: 30px;
Граница: 1PX SOLID #0094FF;
маржинальная версия: 3PX;
Подкладка: 0px 5px;
}
.tblist {
Ширина: 912px;
Высота: Авто;
}
.tblist th {
Граница: 1PX SOLID #000;
Фон: #0094ff;
Высота: 30px;
шрифт-вес: жирный шрифт;
высота линии: 30px;
Цвет: #ffff;
}
.InputShort {
Ширина: 100px;
}
.btn {
Ширина: 70px;
Высота: 25px;
высота линии: 25px;
шрифт-вес: жирный шрифт;
Текст-альбом: Центр;
}
td {
Граница: 1px твердый;
Высота: 25px;
текстовый: 1ем;
пограничный коллапс: коллапс;
}
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.