Problem when inserting new row in table

Question

I need to include new rows in this table with their respective columns:

<div class="tasks-group-new-area">
    <input class="input-task" type="text" placeholder="Add Task">
    <button id="includeRow" class="btn btn-success" type="submit" onclick="includeRow()">+ Add</button>
</div>

<div class="task-group-table-area">
    <table class="table table-hover" id="tableStatus">
        <thead>
            <tr>
                <th scope="col"><input class="first-task-checkbox" type="checkbox" name="" id=""></th>
                <th scope="col" aria-sort="ascending">Title</th>
                <th scope="col">Date</th>
                <th scope="col">Status</th>
                <th scope="col">Responsible</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">
                    <span>
                        <input type="checkbox" name="" id="">
                        <button class="btn-status">
                            <i class="fa fa-check check-status" aria-hidden="true"></i>
                        </button>
                        <button class="btn-status">
                            <i class="fa fa-star favorite-status" aria-hidden="true"></i>
                        </button>
                    </span>
                </th>
                <td>Lorem ipsum dolor sit</td>
                <td>01/18/20</td>
                <td>
                    <span>
                        <i class="fa fa-exclamation-circle exclamation-status" aria-hidden="true"></i>
                    </span>
                </td>
                <td>Dolorum deserunt totam eum</td>
            </tr>
        </tbody>
    </table>
</div>

I’m a beginner in js, I managed to include a whole row but not with columns, someone can help me in what I can adjust in this code?

function includeRow() {
    document.querySelector('#includeRow').addEventListener('click', function(){
        var listTable = document.querySelector('#tableStatus');
        var textInput = document.querySelector('.input-task');
        var tableRow = document.createElement('tr');

        tableRow.textContent = textInput.value;

        listTable.appendChild(tableRow);

        textInput.value = '';

        textInput.focus();
    })
}

Answer 1

First you don’t need to put addeventlistener inside a function, this way you would do so: Using string template

document.querySelector('#includeRow').addEventListener('click', function(){
        var listTable = document.querySelector('#tableStatus');
        var textInput = document.querySelector('.input-task');
        var newRow = listTable.insertRow(listTable.rows.length); //Adiciona uma linha no final
        
        newRow.innerHTML = //Sera o html
          `<th scope="row">
                    <span>
                        <input type="checkbox" name="" id="">
                        <button class="btn-status">
                            <i class="fa fa-check check-status" aria-hidden="true"></i>
                        </button>
                        <button class="btn-status">
                            <i class="fa fa-star favorite-status" aria-hidden="true"></i>
                        </button>
                    </span>
                </th>
          <td> ${textInput.value}</td>
          <td>20/01/2021</td>
           <td>
              <span>
                  <i class="fa fa-exclamation-circle exclamation-status" aria-hidden="true"></i>
               </span>
            </td>
            <td>Dolorum deserunt totam eum</td>`

        textInput.value = '';

        textInput.focus();
    })