How to display array values in table tbody and add multiple values in same array

Question

I want to display array values in my table rows which I am getting from input values. I create a getting a array but doesn't get idea how can I display them in table?

I want to add more values in same array when I am adding it also I want to delete table row by clicking on delete at same time its need to be delete from array this is my code

var users = [
  [1, "Yuvraj"],
  [2, "Shweta"],
  [3, "Namita"],
  [4, "Tanvi"]
]

$(document).ready(loadTable);

function loadTable() {
  for (var i = 0; i < users.length; i++) {
    for (var j = 0; j < users[i].length; j++) {
      console.log(users[i][j])
    }
  }
}

$("#submit").on('click', function() {
  var temp = [document.getElementById("id").value, document.getElementById("name").value]
  users.push(temp)
  loadTable();
});

<html><head><title>Hello</title>table,
th,
td {
  border: 1px solid black;
}

<html>

<head>
  <title>Hello</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <input type="text" name="id" id="id">
  <input type="text" name="name" id="name">
  <button type="button" id="submit">Add</button>
  <table id="demo">
    <tbody>
    </tbody>
  </table>
</body>

</html>

    <html>
    <head>
        <title>Hello</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>

    <body>
        <input type="text" name="id" id="id">
        <input type="text" name="name" id="name">
        <button type="button" id="submit">Add</button>
        <table id="demo">
            <tbody>
            </tbody>
        </table>
    </body>
</html>

<script>
    var users = [[1, "Yuvraj"], [2, "Shweta"], [3, "Namita"], [4,"Tanvi"]]

    $(document).ready(loadTable);
    function loadTable() {
        for(var i = 0; i < users.length; i++){
            for(var j = 0; j < users[i].length; j++){
                console.log(users[i][j])
            }
        }
    }

    $("#submit").on('click', function() {
        var temp = [document.getElementById("id").value, document.getElementById("name").value]
        users.push(temp)

        loadTable();
    });
</script>

<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

Output I am getting

@MarkSchultheiss Markup doesn't belong in the CSS section, and the HTML section should only contain the `` part and not the whole document -> [I've been told to create a "runnable" example with "Stack Snippets", how do I do that?](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) — Andreas, Mar 30 '22 at 12:55

score 1 · Answer 1 · answered Mar 30 '22 at 12:53

This piece code will empty the #demo table and will fill it with as many rows as many users there are in the users array:

$('#demo tbody').empty();

users.forEach(
   user => $('#demo tbody').append(`<tr><td>${user[0]}</td><td>${user[1]}</td></tr>`)
);

score 0 · Answer 2 · answered Mar 30 '22 at 13:04

You can try the below code. Hope it helps

var users = [
  [1, "Yuvraj"],
  [2, "Shweta"],
  [3, "Namita"],
  [4, "Tanvi"]
]

$(document).ready(loadTable);

let outputHTML = ``

function loadTable() {
  for (var i = 0; i < users.length; i++) {
    outputHTML += `<tr>
        <td>${users[i][0]}</td>
        <td>${users[i][1]}</td>
        <tr>`
  }
  $('#demo tbody').append(outputHTML);
}

function addItems(item) {
  $('#demo tbody').append(`<tr>
        <td>${item[0]}</td>
        <td>${item[1]}</td>
        <tr>`);
}

$("#submit").on('click', function() {
  var temp = [document.getElementById("id").value, document.getElementById("name").value]
  addItems(temp)
});

table,
th,
td {
  border: 1px solid black;
}

<html>

<head>
  <title>Hello</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <input type="text" name="id" id="id">
  <input type="text" name="name" id="name">
  <button type="button" id="submit">Add</button>
  <table id="demo">
    <tbody>
    </tbody>
  </table>
</body>

</html>

its running but its not storing in same array I also want to store that value in same array — Shweta Shinde, Mar 31 '22 at 11:44

How to display array values in table tbody and add multiple values in same array

2 Answers2