javascript - Updating html table with input - Stack Overflow

admin管理员组

文章数量:1429064

I am a learning js, html, css, and general web development for the first time and I wanted to create a simple (or so I thought) table that I could use personally for keeping track of items that I currently have.

Essentially what I want to do is make a dynamically-sized table that can take and save input.

I was thinking of a way to make some javascript function in order to add tags into my tables from the input given. I have seen a personal website where the developer had input boxes with a submit button, causes the data to be added in to a table in another html file's table.

For instance, if I have:

<table id="inventory">
  <thead>
    <tr>
      <th>Item Name</th>
      <th>Item Number</th>
      <th>Item Color</th>
    </tr>
  </thead>
</table>

Would it be possible for me to say add

<tr class = "boxType">
  <th>BoxV1</th>
  <th>#1111</th>
  <th>Blue</th>
</tr>

The above block into the table using javascript and inputs?

I tried making an addRows method after snooping around the web, and that created a temporary version of the table that would be empty when refreshed (meaning it wasn't put into the code, but rather added on for that session), I want to permanently stick it into the table if possible.

edit: Some thoughts I have:

I feel like something can be done if i make a <tbody id ="list"> and use some form of innerHTML to add the <tr> block in?

maybe using some php form in order to update the html table block?

Thank you!

I am a learning js, html, css, and general web development for the first time and I wanted to create a simple (or so I thought) table that I could use personally for keeping track of items that I currently have.

Essentially what I want to do is make a dynamically-sized table that can take and save input.

I was thinking of a way to make some javascript function in order to add tags into my tables from the input given. I have seen a personal website where the developer had input boxes with a submit button, causes the data to be added in to a table in another html file's table.

For instance, if I have:

<table id="inventory">
  <thead>
    <tr>
      <th>Item Name</th>
      <th>Item Number</th>
      <th>Item Color</th>
    </tr>
  </thead>
</table>

Would it be possible for me to say add

<tr class = "boxType">
  <th>BoxV1</th>
  <th>#1111</th>
  <th>Blue</th>
</tr>

The above block into the table using javascript and inputs?

I tried making an addRows method after snooping around the web, and that created a temporary version of the table that would be empty when refreshed (meaning it wasn't put into the code, but rather added on for that session), I want to permanently stick it into the table if possible.

edit: Some thoughts I have:

I feel like something can be done if i make a <tbody id ="list"> and use some form of innerHTML to add the <tr> block in?

maybe using some php form in order to update the html table block?

Thank you!

• javascript
• php
• html
• web

Share Improve this question Follow edited Apr 21, 2016 at 19:16 Tyler asked Apr 21, 2016 at 18:47 TylerTyler 1311 gold badge11 silver badge55 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can use localStorage to save the rows you add and load them on browser refresh. They will not be saved if localstorage gets cleared or if you change browsers however.

The way to permanently save the information you enter is to have a database and store the data there. This can be acplished by using a "backend" to handle requests for info, retrieve records from the database, and send it back to the javascript / html page.

There are many ways to construct a backend to handle these requests, I am familiar with using c# running on a server and an SQL database to store information. Describing all the possible implementations is far beyond the scope of this question.

All that said, none of these methods actually add the data you enter "into the code". Your javascript files do not get updated as you enter rows into your table. What happens is your javascript has a function to request all the rows of the table (from localStorage or from a request to the server) then loops through the information retrieved and build the HTML for a table from the results.

Use innerHtml or jQuery html() function and localstorage to keep track of update dom content. Also remember to reload old data on page load. See my full example:

http://jsbin./voroku/edit?html,output

HTML INPUT:

<input type="text" id="one">
<input type="text" id="two">
<input type="text" id="three">
<button onclick="addRow()">ADD</button>

JS FUNCTION:

$( document ).ready(function(){
  $('#screen').html(localStorage.getItem("data"));

});
 function addRow(){
      var str = '<tr class = "boxType">\
                 <td>'+$('#one').val()+'</td>\
                 <td>'+$('#two').val()+'</td>\
                 <td>'+$('#three').val()+'</td>\
                 </tr>';
      $('#screen').append(str);

      localStorage.setItem("data", $('#screen').html());
    }

In your javascript function do: give your tbody an id eg bodyId document.getElementById("bodyId").innerHtml += "<tr class = 'boxType' <th>BoxV1</th<th>#1111</th><th>Blue</th</tr>"

You basically just need to create a new row, as a string in your JavaScript file/part, and than append it to the existing table: (Using jQuery)

var newRow = "my new row in html";

$("mytable").append(newRow);

本文标签： javascriptUpdating html table with inputStack Overflow