Q:

Проблема с setAttribute() / removeAttribute при выборе элемента через radio-button

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

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

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

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

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>

A:

Дело в том, что при клике в радио-кнопку не запускается следующая проверка для кнопок добавления/удаления строк, - нужны ли для вновь выбранной таблицы ранее установленные/снятые атрибуты 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);
        }

