Hello! We have:

  1. two radio-button'a
  2. two buttons: add line / delete line
  3. and two tables.

With the help of radio-button, we select the table from which we will add / delete a row. If the number of rows of the table == 2, then the button "delete row" set the attribute disabled. If the number of lines == 10 then the button "add line" is set to disabled.

The problem is that if one table has a disabled attribute, then selecting another table (changing radio-button) disables it.

Total 2 questions:

  1. How to fix it so that disabled is added only for that table the number of rows of which matches the condition, and for another table (if the condition does not match) the add / delete buttons must be active.
  2. When adding a row, the last row of the table is cloned and if there is some value in the elements of this row, it is also copied. How to avoid it (so that even if the element of the last line has a value, the line from the elements is added without a value)?

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 answer 1

    The fact is that when you click on the radio button, the next check for the add / delete buttons does not start, do you need previously set / removed attributes for the newly selected table?

    The simplest thing is to make the click events for the same addRow and removeRow pop up , like this:

     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); }
    • Thank. And on the second question there are options? )) - Astor
    • I somehow missed the second question =) Well, I would put in the variable the value to insert, ala var insertThis = '<tr> ... </ tr>' and insert it. Then this blank template will always be inserted. If you need to dynamically calculate the number of <td>, then before inserting, count the required number based on, say, the last row of the selected table, fill insertThis with the required amount of td and insert. Something like this ... - Mr. Brightside
    • Thanks again. - Astor
    • I noticed one strange bug - if you add 10 rows to both tables and then click on the radio button, then one of the tables deletes the row ... How to cure it? - Astor
    • Yes, and another question - how to get rid of code duplication in your example? - Astor