Search code examples
javascripthtmlclickdraggable

Adding new row to table with three columns Javascript html click function


Desrciption

I'd like to able to add a row using javascript with three columns to a table in html. I am creating a table where the user can enter their own text and add the text along with two other pieces of information to the table into three columns. The current code that I have will not display the new row. The code also includes a drag and drop feature where the user can click on the row and drag it into a different position into the table. I am asking for guidance as to why when I press the click button it does not add a new row to the table. edit: Code is now working after update, but the else statement does not do anything.

Javascript

 function addRow(mytable) {
 var food = document.createTextNode(document.querySelector('.input').value);
 var category = document.createTextNode(document.querySelector('.input2').value);
 var time = document.createTextNode(document.querySelector('.input3').value);
 document.querySelector('.input').value = '';
  document.querySelector('.input2').value = '';
   document.querySelector('.input3').value = '';
  // Get a reference to the table
  if (food !== '') {
  var tableRef = document.getElementById(mytable);
  var attr = document.createAttribute('draggable');
  attr.value = 'true';
  // Insert a row at the end of the table
  var newRow = tableRef.insertRow(-1);
  newRow.setAttributeNode(attr);
  newRow.className = 'draggable';

  // Insert a cell in the row at index 0
  var newCell = newRow.insertCell(0);
  var newCell2 = newRow.insertCell(1);
  var newCell3 = newRow.insertCell(2);

   var newText = food;
   var newText2 = category;
   var newText3 = time;

  newCell.appendChild(newText);
  newCell2.appendChild(newText2);
  newCell3.appendChild(newText3);
  addEventsDragAndDrop(newRow);
   }
   //not working for some reason
   else {
     document.getElementById("msg").innerHTML = "Please enter a name";
   }
}

javascript click

 document.getElementById('btn').addEventListener('click', function( {addRow('mytable');});

HTML

<table id="mytable">
                   <tr>
                     <th>Component</th>
                     <th>Category</th>
                     <th>Time</th>
                   </tr>

                   <div id="addRow"></div>

                </table>

Solution

  • Few adjustments below, but more detail needed, atm only one text input for component, but can add more for cook/time

    function addRow(mytable) {
                 var newItem = document.createTextNode(document.querySelector('.input').value);
                 var category = document.createTextNode("Cook");
                 var time = document.createTextNode("time");
                 document.querySelector('.input').value = '';
              // Get a reference to the table
               if (newItem != '') {
                  var tableRef = document.getElementById(mytable);
                  var attr = document.createAttribute('draggable');
                  attr.value = 'true';
              // Insert a row at the end of the table
                  var newRow = tableRef.insertRow(-1);
                  newRow.setAttributeNode(attr);
                  newRow.className = 'draggable';
    
              // Insert a cell in the row at index 0
                  var newCell = newRow.insertCell(0);
                  var newCell2 = newRow.insertCell(1);
                  var newCell3 = newRow.insertCell(2);
    
                  var newText =  newItem;
                  var newText2 =  category;
                  var newText3 = time;
    
                  newCell.appendChild(newText);
                  newCell2.appendChild(newText2);
                  newCell3.appendChild(newText3);
                  addEventsDragAndDrop(newRow);
               }
            }
            
            document.getElementById('btn').addEventListener('click', function(){addRow('mytable');});
    <table id="mytable">
                       <tr>
                         <th>Component</th>
                         <th>Category</th>
                         <th>Time</th>
                       </tr>
                       <tr class="draggable" id="draggable" draggable="true">
                       <td>Food goes here</td>
                       <td>Cook</td>
                       <td>10</td>
                     </tr>
    
                       <div id="addRow"></div>
    
                    </table>
                    
                    
                                    <label for='component'>component</label>
                    <input class='input' id='component' />
                    <button id='btn'>add component</button>