Breaking News: Grepper is joining You.com. Read the official announcement!

three input data store local storage append table jquery

SANKAR.M answered on November 7, 2023 Popularity 2/10 Helpfulness 8/10

answer three input data store local storage append table jquery

three input data store local storage append table jquery

Comment

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="dataInput1" placeholder="Data 1">
  <input type="text" id="dataInput2" placeholder="Data 2">
  <input type="text" id="dataInput3" placeholder="Data 3">
  <button id="addData">Add</button>
  
  <table id="dataTable">
    <thead>
      <tr>
        <th>Data 1</th>
        <th>Data 2</th>
        <th>Data 3</th>
      </tr>
    </thead>
    <tbody>
      <!-- Data will be appended here -->
    </tbody>
  </table>
</body>
  <script>
    $(document).ready(function() {
      // Load existing data from local storage
      const data = JSON.parse(localStorage.getItem('data')) || [];

      // Append existing data to the table
      function appendDataToTable() {
        const $tableBody = $('#dataTable tbody');
        $tableBody.empty();

        data.forEach(item => {
          const [data1, data2, data3] = item;
          $tableBody.append(`<tr><td>${data1}</td><td>${data2}</td><td>${data3}</td></tr>`);
        });
      }

      // Add new data to the table and local storage
      $('#addData').click(function() {
        const data1 = $('#dataInput1').val();
        const data2 = $('#dataInput2').val();
        const data3 = $('#dataInput3').val();

        if (data1.trim() !== '' && data2.trim() !== '' && data3.trim() !== '') {
          data.push([data1, data2, data3]);
          localStorage.setItem('data', JSON.stringify(data));
          appendDataToTable();
          $('#dataInput1, #dataInput2, #dataInput3').val(''); // Clear the input fields
        }
      });

      // Initialize table with existing data
      appendDataToTable();
    });

  </script>
</html>

Popularity 2/10 Helpfulness 8/10 Language html

Source: chat.openai.com

Tags: append html input jquery local-storage store

Link to this answer
Share Copy Link

Contributed on Nov 07 2023

SANKAR.M

0 Answers Avg Quality 2/10

three input data store local storage append table jquery

Contents

More Related Answers

three input data store local storage append table jquery

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.