0

Всем привет! Имеем:

  1. два radio-button'a
  2. две кнопки: добавить строку/удалить строку
  3. и две таблицы.

С помощью radio-button'a выбираем таблицу у которой будем добавлять/удалять строку. Если количество строк таблицы == 2, то кнопке "удалить строку" ставим атрибут disabled. Если кол-во строк == 10 то кнопке "добавить строку" ставим disabled.

Проблема в том, что если у одной таблицы стоит атрибут disabled, то при выборе другой таблицы (меняем radio-button) disabled сохраняется.

Итого 2 вопроса:

  1. Как это исправить, чтобы disabled добавлялся только для той таблице кол-во строк которой соответствует условию, а для другой таблицы (если условию не соответствует) кнопки добавить/удалить должны быть активными.
  2. При добавлении строки клонируется последняя строка таблицы и если в элементах этой строки есть некое значение, то оно тоже копируется. Как этого избежать (чтобы даже если у элемента последней строки есть значение, то строка с элементов добавлялась без значения)?

var table1 = document.getElementById('radio-table1'),
		table2 = document.getElementById('radio-table2'),
		addRow = document.getElementById('addRow'),
		removeRow = document.getElementById('removeRow');


// выбираем таблицу

function getTable() {
	return (table1.checked) ? document.getElementById('table-one') : document.getElementById('table-two');
}


// добавляем строку

addRow.onclick = function() {
	var table = getTable(),
			lastRow = table.querySelectorAll('tr:last-child')[0];
	
	this.nextElementSibling.removeAttribute('disabled');
	
	if(lastRow.parentNode.children.length == 10) return;
	
	lastRow.parentNode.insertBefore(lastRow.cloneNode(true), null);
	
	if(lastRow.parentNode.children.length == 10) {
	 this.setAttribute('disabled', 'disabled');
	} 
}


// удаляем строку

removeRow.onclick = function() {
	var table = getTable(),
			lastRow = table.querySelectorAll('tr:last-child')[0],
			parentLastRow = lastRow.parentNode;
	
	this.previousElementSibling.removeAttribute('disabled');
	
	if(parentLastRow.children.length == 2) return;
	
	parentLastRow.removeChild(lastRow);
	
	if(parentLastRow.children.length == 2) {
	 this.setAttribute('disabled', 'disabled');
	} 
}

// предварительная проверка количества детей таблицы

function checkTableElementsLength() {
	var tableOne = document.getElementById('table-one').querySelectorAll('tr:last-child')[0],
			tableTwo = document.getElementById('table-two').querySelectorAll('tr:last-child')[0];
	
	if (tableOne.parentNode.children.length == 2 || tableTwo.parentNode.children.length == 2) {
		removeRow.setAttribute('disabled', 'disabled');
	}
	
	
}
checkTableElementsLength();
div { margin: 10px; }
div > * { display: inline-block; }

table { float: left; margin-right: 30px; }

table input {
	display: block;
	width: 40px;
	height: 40px;
	text-align: center;
}
<div>
	<input id="radio-table1" type="radio" name="table" checked /><label for="radio-table1">Таблица 1</label>
	<input id="radio-table2" type="radio" name="table" /><label for="radio-table2">Таблица 2</label>
</div>
<div>
	<button type="button" id="addRow">Добавить строку</button>
	<button type="button" id="removeRow">Удалить строку</button>
</div>
<table id="table-one">
	<tr>
		<td><input type="text" value="" /></td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td><input type="text" value="" /></td>
		<td><input type="text" value="" /></td>
	</tr>
</table>

<table id="table-two">
	<tr>
		<td><input type="text" value="" /></td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td><input type="text" value="" /></td>
		<td><input type="text" value="" /></td>
	</tr>
	<tr>
		<td><input type="text" value="" /></td>
		<td><input type="text" value="" /></td>
	</tr>
</table>

1 ответ 1

1

Дело в том, что при клике в радио-кнопку не запускается следующая проверка для кнопок добавления/удаления строк, - нужны ли для вновь выбранной таблицы ранее установленные/снятые атрибуты disabled?

Самое простое это заставить всплыть события click для тех же addRow и removeRow, примерно таким образом:

table1.onclick = function() {
            var eventClick = new Event('click');
            addRow.dispatchEvent(eventClick);
            removeRow.dispatchEvent(eventClick);
        }

        table2.onclick = function() {
            var eventClick = new Event('click');
            addRow.dispatchEvent(eventClick);
            removeRow.dispatchEvent(eventClick);
        }
12
  • Спасибо. А по второму вопросу есть варианты? ))
    – Astor
    3 авг 2016 в 8:39
  • Второй вопрос как-то пропустил =) Ну, я бы положил в переменную значение для вставки, аля var insertThis = '<tr>...</tr>' и вставлял бы его. Тогда всегда будет вставляться этот пустой шаблон. Если необходимо динамически рассчитываеть кол-во <td>, то перед вставкой посчитать необходимое количество на основе, скажем, последней строки выбранной таблицы, наполнить insertThis нужным количество td и вставить. Как то так... 3 авг 2016 в 8:45
  • Еще раз спасибо.
    – Astor
    3 авг 2016 в 9:01
  • Заметил один странный баг - если обеим таблицам добавить по 10 строк, а затем кликнуть по радио-баттону, то у одной из таблиц удаляется строка ... Как это вылечить?
    – Astor
    3 авг 2016 в 9:43
  • Да, и еще вопрос - как избавиться от дублирования кода в вашем примере?
    – Astor
    3 авг 2016 в 9:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.