Здравствуйте, подскажите пожалуйста что нужно дописать чтобы выполнить условие Реализовать возможность динамического создания/удаления строк таблицы. Путем добавления кнопок "Добавить"/"Удалить" в четвертую колонку таблицы. Последнюю строку удалить нельзя. | Код |
<!DOCTYPE html>
<html>
<head>
<title>Динамическая таблица</title>
<script type="text/javascript" src="tab.js"></script>
<style>
table, td {
border: 1px solid #aaa;
border-collapse: collapse;
padding: 5px;
margin: 10px;
}
table thead {
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="table-wrapper"></div>
<script>
window.onload = function() {
var wrapper = document.getElementById('table-wrapper');
var table = {
header : ['Идентификатор', 'Название', 'Описание'],
data : [
['1', 'Элемент 1', 'Первый элемент в списке'],
['2', 'Элемент 2', 'Второй элемент в списке'],
['3', 'Элемент 3', 'Третий элемент в списке']
],
extra : {
filter : false, //Добавляет фильтрацию по колонке "Название"
dynamic : false, //Добавляет кнопку "Удалить"/"Добавить" в последнюю колонку для каждой строки
sortable : false //Добавлять сортировку для колонки "Индетификатор"
},
properties : {
id : 'table-demo',
className : 'table table-default'
}
};
var tableGenerator = new TableGenerator(table, wrapper);
tableGenerator.render();
var wrapper = document.getElementById('table-wrapper');
var tableGenerator = new TableGenerator(table, wrapper);
tableGenerator.render();
};
</script>
</body>
</html>
|
| Код |
/**
*
* @param tableJson Table
* @param wrapper HTMLElement - элемент <div> куда необходимо добавить таблицу
* @constructor
*/
function TableGenerator(tableJson, wrapper) {
//private
var header = tableJson['header'];
var data = tableJson['data'];
var extra = tableJson['extra'];
var properties = tableJson['properties'];
var that = this; //указатель на текущий объект
var parentObj = wrapper;
/**
* @type HTMLTableElement
*/
var table = null;
/**
* Данная функция будет проверять входные параметры
*/
(function() {
if(parentObj == null) {
console.error('Ошибка элемент для вставки не найден');
return false;
}
_create();
return true;
})();
function _create() {
table = document.createElement("TABLE");
//Добавляем свойства для таблицы
for(var prop in properties) {
if(properties.hasOwnProperty(prop)) {
if(!(prop in table)) {
//Если свойство не найдено
console.warn('Свойство "' + prop + '" не найдено в объекте table');
continue;
}
table[prop] = properties[prop];
}
}
var cell;
//Заполняем таблицу основным содержимым
if(data != undefined) {
for(var rowIndex in data) {
if(data.hasOwnProperty(rowIndex)) {
var row = table.insertRow(Number(rowIndex));
for(var cellIndex in data[rowIndex]) {
if(data[rowIndex].hasOwnProperty(cellIndex)) {
cell = row.insertCell(Number(cellIndex));
cell.innerHTML = data[rowIndex][cellIndex];
}
}
}
}
}
//Если есть заголовок
if(header != undefined) {
//Создаем шапку таблицы
var head = table.createTHead();
var headRow = head.insertRow(0);
for(var headerColumn in header) {
if(header.hasOwnProperty(headerColumn)) {
cell = headRow.insertCell(Number(headerColumn));
cell.innerHTML = header[headerColumn];
}
}
}
}
this.render = function() {
if(table == null) {
console.error('Таблица не сформирована');
return false;
}
wrapper.appendChild(table);
}
}
|
|
Создание/удаление строк 
Дата 24.5.2017, 03:14 (
Загрузка ...
