Прошу помощи добавить кнопку редактирования / сохранения в ячейке, рядом с другими кнопками добавления и удаления строк. Кнопка должна дублироваться вместе с остальными, в каждой строке.
body {
font-family: "Helvetica";
font-size: medium;
}
table {
border-collapse: collapse;
text-align: center;
margin: auto;
}
table td,
table th {
border: solid 1px #aaa;
padding: 10px;
}
table tbody tr:nth-child(2n) {
background: #a8d7ff;
}
table tbody tr:hover {
background: #fffcb6;
}
| Поле 1 | Поле 2 | Поле 3 | Поле 4 | Поле 5 |
|---|---|---|---|---|
Ответ
Никогда такого сам не делал, не судите строго :
var DynamicTable = (function(GLOB) {
var RID = 0;
return function(tBody) {
/* Если ф-цию вызвали не как конструктор фиксим этот момент: */
if (!(this instanceof arguments.callee)) {
return new arguments.callee.apply(arguments);
}
//Делегируем прослушку событий элементу tbody
tBody.onclick = function(e) {
var evt = e || GLOB.event,
trg = evt.target || evt.srcElement;
if (trg.className && trg.className.indexOf("add") !== -1) {
_addRow(trg.parentNode.parentNode, tBody);
} else if (trg.className && trg.className.indexOf("del") !== -1) {
tBody.rows.length > 1 && _delRow(trg.parentNode.parentNode, tBody);
}
// то что я добавил
if (trg.className && trg.className.indexOf("edit") !== -1) {
var tds = trg.closest('tr').children;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className.indexOf("buttons") == -1) {
var input = tds[i].getElementsByTagName('input')[0];
var lbl = tds[i].getElementsByTagName('label')[0];
input.value = lbl.textContent;
input.classList.remove("invisible");
lbl.classList.add("invisible");
} else {
var buttons = tds[i].children;
for (var j = 0; j < buttons.length; j++) {
if (buttons[j].className.indexOf("save") !== -1) {
buttons[j].disabled = false;
break;
}
}
}
}
}
if (trg.className && trg.className.indexOf("save") !== -1) {
var tds = trg.closest('tr').children;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className.indexOf("buttons") == -1) {
var input = tds[i].getElementsByTagName('input')[0];
var lbl = tds[i].getElementsByTagName('label')[0];
lbl.textContent = input.value;
input.classList.add("invisible");
lbl.classList.remove("invisible");
} else {
var buttons = tds[i].children;
for (var j = 0; j < buttons.length; j++) {
if (buttons[j].className.indexOf("save") !== -1) {
buttons[j].disabled = true;
break;
}
}
}
}
}
};
// тут конец того что я добавил
var _rowTpl = tBody.rows[0].cloneNode(true);
// Корректируем имена элементов формы
var _correctNames = function(row) {
var elements = row.getElementsByTagName("*");
for (var i = 0; i < elements.length; i += 1) {
if (elements.item(i).name) {
if (elements.item(i).type &&
elements.item(i).type === "radio" &&
elements.item(i).className &&
elements.item(i).className.indexOf("glob") !== -1) {
elements.item(i).value = RID;
} else {
elements.item(i).name = RID + "[" + elements.item(i).name + "]";
}
}
}
RID++;
return row;
};
var _addRow = function(before, tBody) {
var newNode = _correctNames(_rowTpl.cloneNode(true));
tBody.insertBefore(newNode, before.nextSibling);
};
var _delRow = function(row, tBody) {
tBody.removeChild(row);
};
_correctNames(tBody.rows[0]);
};
})(this);
document.addEventListener('DOMContentLoaded', function() {
new DynamicTable(document.getElementById("dynamic"));
});
body {
font-family: "Helvetica";
font-size: medium;
}
table {
border-collapse: collapse;
text-align: center;
margin: auto;
}
table td {
padding: 0px;
height: 30px;
width: 140px;
}
table td input,
table td label {
width: 100%;
height: 100%;
border: none;
text-align: center;
font-size: 16px;
}
table tbody tr:nth-child(2n),
table tbody tr:nth-child(2n) input {
background: #a8d7ff;
}
table tbody tr:hover {
background: #fffcb6;
}
table tbody tr:hover input {
background: #fffcb6;
}
table tbody input:hover {
background: #ffd3b6 !important;
}
table tbody input:active {
background: #c27949 !important;
}
.tblBtn {
width: auto;
height: 20px;
}
.buttons {
width: 150px;
}
.invisible {
display: none;
}
| Buttons | Поле 2 | Поле 3 | Поле 4 | Поле 5 |
|---|---|---|---|---|
Опишу вкратце что я сделал, в каждый td в таблице я добавил input(для редактирования) label(для хранения результата). Соответственно при клике на кнопку edit значение с лейбола пишем в инпут, лейбл скрываем, инпут показываем, при сохранении наоборот.
Вариант без инпутов и лейблов и с 1ной кнопкой :
var DynamicTable = (function(GLOB) { var RID = 0; return function(tBody) { /* Если ф-цию вызвали не как конструктор фиксим этот момент: */ if (!(this instanceof arguments.callee)) { return new arguments.callee.apply(arguments); } //Делегируем прослушку событий элементу tbody tBody.onclick = function(e) { var evt = e || GLOB.event, trg = evt.target || evt.srcElement; if (trg.className && trg.className.indexOf("add") !== -1) { _addRow(trg.parentNode.parentNode, tBody); } else if (trg.className && trg.className.indexOf("del") !== -1) { tBody.rows.length > 1 && _delRow(trg.parentNode.parentNode, tBody); } if (trg.className && trg.className.indexOf("edit") !== -1) { trg.closest('tr').classList.toggle('in-edit'); var isEdit = trg.innerText == 'Edit' ? true : false; trg.innerText = isEdit ? 'Save' : 'Edit'; var tds = trg.closest('tr').children; for (var i = 0; i < tds.length; i++) { if (tds[i].className.indexOf("buttons") == -1) { if (isEdit) { var curVal = tds[i].innerText; tds[i].innerText = ''; var inp = document.createElement('input'); inp.value = curVal; tds[i].appendChild(inp); } else { var newVal = tds[i].childNodes[0].value; tds[i].removeChild(tds[i].childNodes[0]); tds[i].innerText = newVal; } } } } }; var _rowTpl = tBody.rows[0].cloneNode(true); // Корректируем имена элементов формы var _correctNames = function(row) { var elements = row.getElementsByTagName("*"); for (var i = 0; i < elements.length; i += 1) { if (elements.item(i).name) { if (elements.item(i).type && elements.item(i).type === "radio" && elements.item(i).className && elements.item(i).className.indexOf("glob") !== -1) { elements.item(i).value = RID; } else { elements.item(i).name = RID + "[" + elements.item(i).name + "]"; } } } RID++; return row; }; var _addRow = function(before, tBody) { var newNode = _correctNames(_rowTpl.cloneNode(true)); tBody.insertBefore(newNode, before.nextSibling); }; var _delRow = function(row, tBody) { tBody.removeChild(row); }; _correctNames(tBody.rows[0]); }; })(this); document.addEventListener('DOMContentLoaded', function() { new DynamicTable(document.getElementById("dynamic")); }); body { font-family: "Helvetica"; font-size: medium; } table { border-collapse: collapse; text-align: center; margin: auto; } table td { padding: 0px; height: 30px; width: 150px; } table td input, table td label { width: 100%; height: 100%; border: none; text-align: center; font-size: 16px; } table tbody tr:nth-child(2n), table tbody tr:nth-child(2n) input { background: #a8d7ff; } table tbody tr:hover { background: #fffcb6; } table tbody tr:hover input { background: #fffcb6; } table tbody input:hover { background: #ffd3b6 !important; } table tbody input:active { background: #c27949 !important; } table tbody tr.in-edit input, table tbody tr.in-edit td { background: #d9d6b5; } .tblBtn { width: auto; height: 20px; } .buttons { width: 150px; } .invisible { display: none; }
| Поле 2 | Поле 3 | Поле 4 | Поле 5 | |
|---|---|---|---|---|
Комментариев нет:
Отправить комментарий