how can ı call that element on js side by adding values in a new row

Question

<table class="table">
    <tr>
        <th class="numberinfo">Number of Lots</th>
        <th class="priceinfo">Price of a Lot</th>
        <th class="totalinfo">Total Amount of Lots</th>
    </tr>
</table>

that is a table element. how can ı call that element by adding values in a new row

Answer 1

This is an example of js code where I added a function addRow that you can call every time you want to add a new row in your table:

var tableBody = document.getElementById("table-body");

// Function to add a new row with values
function addRow(numberOfLots, pricePerLot) {
    var newRow = document.createElement("tr");
    var lotsCell = document.createElement("td");
    lotsCell.textContent = numberOfLots;
    var priceCell = document.createElement("td");
    priceCell.textContent = pricePerLot;
    var totalCell = document.createElement("td");
    totalCell.textContent = numberOfLots * pricePerLot;
    newRow.appendChild(lotsCell);
    newRow.appendChild(priceCell);
    newRow.appendChild(totalCell);
    tableBody.appendChild(newRow);
}

// Every time you want to add a new line call the function addRow with the params that you want to add
addRow(1, 10);
addRow(2, 15);
addRow(3, 20);

<table class="table">
    <thead>
        <tr>
            <th class="numberinfo">Number of Lots</th>
            <th class="priceinfo">Price of a Lot</th>
            <th class="totalinfo">Total Amount of Lots</th>
        </tr>
    </thead>
    <tbody id="table-body">
        <!-- Existing and future rows will be added here -->
    </tbody>
</table>

For your second comment, if you want to create the table and add values to it dynamically in JavaScript, here is an example of how to do that:

function createTableAndPopulate() {
    // Create a table element
    var table = document.createElement("table");
    table.className = "table";

    // Create a table header
    var thead = document.createElement("thead");
    var headerRow = document.createElement("tr");

    var headers = ["Number of Lots", "Price of a Lot", "Total Amount of Lots"];

    headers.forEach(function(headerText) {
        var th = document.createElement("th");
        th.textContent = headerText;
        headerRow.appendChild(th);
    });

    thead.appendChild(headerRow);
    table.appendChild(thead);

    // Create a table body
    var tbody = document.createElement("tbody");

    // Populate the table with values up to the 20th row
    for (var i = 1; i <= 20; i++) {
        var newRow = document.createElement("tr");
        var numberOfLots = i;
        var pricePerLot = 10;
        var lotsCell = document.createElement("td");
        lotsCell.textContent = numberOfLots;
        var priceCell = document.createElement("td");
        priceCell.textContent = pricePerLot;
        var totalCell = document.createElement("td");
        totalCell.textContent = numberOfLots * pricePerLot;
        newRow.appendChild(lotsCell);
        newRow.appendChild(priceCell);
        newRow.appendChild(totalCell);
        tbody.appendChild(newRow);
    }

    table.appendChild(tbody);

    // Append the table to the document
    var tableContainer = document.getElementById("table-container");
    tableContainer.appendChild(table);
}

// Call the function to create the table and add values
createTableAndPopulate();

<div id="table-container">
</div>

If you want to create the table in JavaScript on page load, then have the possibility to enter the data manually here is an example:

function createTable() {
    var table = document.createElement("table");
    table.className = "table";
    var thead = document.createElement("thead");
    var headerRow = document.createElement("tr");

    var headers = ["Number of Lots", "Price of a Lot", "Total Amount of Lots"];

    headers.forEach(function(headerText) {
        var th = document.createElement("th");
        th.textContent = headerText;
        headerRow.appendChild(th);
    });

    thead.appendChild(headerRow);
    table.appendChild(thead);

    var tbody = document.createElement("tbody");
    table.appendChild(tbody);

    var tableContainer = document.getElementById("table-container");
    tableContainer.appendChild(table);
}

// Call the function to create the table on page load
createTable();

// Function to add a row with user-entered values
function addRow() {
    var numberOfLotsInput = document.getElementById("numberOfLotsInput");
    var pricePerLotInput = document.getElementById("pricePerLotInput");

    var numberOfLots = numberOfLotsInput.value;
    var pricePerLot = pricePerLotInput.value;

    if (numberOfLots && pricePerLot) {
        var table = document.querySelector(".table");
        var tbody = table.querySelector("tbody");
        var newRow = document.createElement("tr");
        var lotsCell = document.createElement("td");
        lotsCell.textContent = numberOfLots;
        var priceCell = document.createElement("td");
        priceCell.textContent = pricePerLot;
        var totalCell = document.createElement("td");
        totalCell.textContent = numberOfLots * pricePerLot;
        newRow.appendChild(lotsCell);
        newRow.appendChild(priceCell);
        newRow.appendChild(totalCell);
        tbody.appendChild(newRow);

        // Clear the input fields
        numberOfLotsInput.value = "";
        pricePerLotInput.value = "";
    }
}

<div id="table-container">
</div>
<hr>
<div>
    <input type="number" id="numberOfLotsInput" placeholder="Number of Lots">
    <input type="number" id="pricePerLotInput" placeholder="Price of a Lot">
    <button onclick="addRow()">Add Row</button>
</div>