I would like to know how to insert new table rows via an on click in JavaScript. At the bottom of the table, there is a row including a textbox for each column. This row contains a "Create" button, which should create a table row, before last row of the table. In addition, if you type some text into the textboxes and then click on the "Create" button, the text should be transferred into the columns of the new created row.
Each newcreated row must include two buttons. The first button called, "Change color" changes the color of the entire table row and second button "Delete" deletes the entire table row.
I don't know how to assign a new color for each new row to the function on click "change color". Could someone support me that every row gets various colors? I also don't know how to insert a table row, before last row of the table. The buttons "Change color" and "Delete row" are also not functioning.

You can find my Code here: <https://jsfiddle.net/NoahSchwarz/j5mtsrbn/2/#&togetherjs=NuUS0LxnsH>

```
HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        table {
            border: 2px solid black;
        }
        tr {
            border: 2px solid black;
        }
        td {
            border: 2px solid black;
        }
    </style>
    <script defer src="myScript.js"></script>
</head>
<body>
    <table id="table">
        <tr>
            <td class="cellrow1">Simon</td>
            <td class="cellrow1">Kolsch</td>
            <td class="cellrow1">SimonK</td>
            <td class="cellrow1">
                <button type="button" onclick="changecolor('cellrow1','color')">Change 
                color</button>
            </td>
            <td class="cellrow1">
                <button type="button" onclick="deleteRow(this)">Delete row</button>
            </td>
        </tr>
        <tr>
            <td class="cellrow2">Noah</td>
            <td class="cellrow2">Schwarz</td>
            <td class="cellrow2">NoahS</td>
            <td class="cellrow2">
                <button type="button" onclick="changecolor('cellrow2','color')">Change 
                color</button>
            </td>
            <td class="cellrow2">
                <button type="button" onclick="deleteRow(this)">Delete row</button>
            </td>
        </tr>
        <tr>
            <td class="cellrow3">Lukas</td>
            <td class="cellrow3">Ortlieb</td>
            <td class="cellrow3">OrLiLu</td>
            <td class="cellrow3">
                <button type="button" onclick="changecolor('cellrow3','color')">Change 
                color</button>
            </td>
            <td class="cellrow3">
                <button type="button" onclick="deleteRow(this)">Delete row</button>
            </td>
        </tr>
        <tr>
            <td class="cellrow4">
                <input type="text" />
            </td>
            <td class="cellrow4">
                <input type="text" />
            </td>
            <td class="cellrow4">
                <input type="text" />
            </td>
            <td class="cellrow4">
                <button type="button" onclick="addRow()">Create new Tablerow</button>
            </td>
            <td></td>
        </tr>
    </table>
</body>

```

```
JavaScript:

// Delete function (Deletes a whole Tablerow onclick)
function deleteRow(r) {
 var rows = r.parentNode.parentNode.rowIndex;
 document.getElementById("table").deleteRow(rows);
}

// Color function (Colors a whole Tablerow onclick)
function changecolor(classesOfCellrows, color) {
 var cellrows = document.getElementsByClassName(classesOfCellrows);
 [...cellrows].forEach(rows => rows.style.backgroundColor = color);
 [...cellrows].forEach(element => console.log(element));
}

//This function will add a new row and everything that was typed into the 
//input field should then be transfered into the new Tablerow if created
function addRow() {
 var table = document.getElementById('table');
 var row = table.insertRow(0);
 var cell1 = row.insertCell(0);
 var cell2 = row.insertCell(1);
 var cell3 = row.insertCell(2);
 var cell4 = row.insertCell(3);
 var cell5 = row.insertCell(4);
 cell4.innerHTML = "<button onclick= '//function'>Change color</button>";
 cell5.innerHTML = "<button onclick='//function'>Delete row</button>";
}

```