Scribd Logo
Upload

Welcome to Scribd!

  • A

    Uploaded by

    yukinery123
    8 views1 page
    This document contains an HTML page with JavaScript code to add new income categories to a table. The page includes inputs for the category name and description, and a button to add a new row to the table displaying the input values. When the button is clicked, the JavaScript code gets the input values, creates new table cells containing that data, and adds them as a new row in the table.

    Original Description:

    Original Title

    a

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains an HTML page with JavaScript code to add new income categories to a table. The page includes inputs for the category name and description, and a button to add a new row to the table displaying the input values. When the button is clicked, the JavaScript code gets the input values, creates new table cells containing that data, and adds them as a new row in the table.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views1 page

    A

    Uploaded by

    yukinery123
    This document contains an HTML page with JavaScript code to add new income categories to a table. The page includes inputs for the category name and description, and a button to add a new row to the table displaying the input values. When the button is clicked, the JavaScript code gets the input values, creates new table cells containing that data, and adds them as a new row in the table.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline JS Demo</title>
    </head>
    <body>
    <h1>Income Category</h1>
    <span>Name of Category</span><br>
    <input type="text" id="txtCatName"><br>
    <span>Description</span><br>
    <input type="text" id="txtCatDesc"><br>
    <input type="button" id="btnAdd" value="Add">
    <hr>
    <h1>List of Income Category</h1>
    <table border="1">
    <thead>
    <tr>
    <th>Name</th>
    <th>Description</th>
    </tr>
    </thead>
    <tbody id="listIncomeCat">

    </tbody>
    </table>
    <script>
    // Bind DOM components
    let a = document.getElementById("txtCatName");
    let b = document.getElementById("txtCatDesc");
    let c = document.getElementById("btnAdd");
    let d = document.getElementById("listIncomeCat");

    c.addEventListener("click", addIncomeCat);

    function addIncomeCat() {
    let catName = a.value;
    let catDesc = b.value;
    let createNewRow = document.createElement("tr");
    let catNameCell = document.createElement("td");
    catNameCell.textContent = catName;

    let descCatCell = document.createElement("td");


    descCatCell.textContent = catDesc;

    createNewRow.appendChild(catNameCell);
    createNewRow.appendChild(descCatCell);

    d.appendChild(createNewRow);

    a.value = "";
    b.value = "";
    }
    </script>

    </body>
    </html>

    You might also like