Updating html table with input

Question

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!

IrkenInvader · Accepted Answer · 2016-04-21 18:59:31Z

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 accomplished 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.

answered Apr 21, 2016 at 18:59

IrkenInvader

4,0401 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Tyler Over a year ago

Is it possible for me to use the innerHTML method with a mix of tbody id in order to add the tr blocks into tbody?

IrkenInvader Over a year ago

Yeah you can add rows to your table that way. The trick is as you found out -- saving the rows after the fact. I might write up a quick demo of using localStorage to store the information as it is a simple way to store the data to build your table. Not nearly as robust a solution as a proper server and database though.

Tyler Over a year ago

What would you say about a php form to update the html by inserting blocks into the html table code at submission? Or is that another miss? I was hoping to slip in a "hidden" page on my site so that I could look at the sheet from anywhere.

IrkenInvader Over a year ago

That could probably work, I'm not very familiar with php sadly so I can't really say. Sorry about that.

IrkenInvader Over a year ago

Here is a fiddle showing what I was talking about, you should be able to refresh or close your browser and all the info you enter shows back up. jsfiddle.net/85qofxsj/2

|

JoviaArk · Accepted Answer · 2016-04-21 19:11:31Z

0

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.com/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());
    }

edited Apr 21, 2016 at 19:11

answered Apr 21, 2016 at 19:03

JoviaArk

1112 bronze badges

7 Comments

Tyler Over a year ago

I believe this format just saved a session-only copy? I was hoping for something that I would occasionally go to check and update

JoviaArk Over a year ago

for that you would require to save the content to a server.

Tyler Over a year ago

No way to put it into the code? How about some kind of php form? Could I take the input and put it into the table? (Knowing it would probably be messy)

JoviaArk Over a year ago

see php again is server side. you need a server code to do it. What you want is, in php keep saving the data to a file. Is that what you are looking for?

Tyler Over a year ago

Yes, I was thinking of having the data saving onto the html file so I wouldn't have to deal with server data. This is going to be for just personal use and update so I don't really mind if it turns into a ridiculous block of code (which is the thing I saw in the personal example I mentioned in the post) For reference, the guy's source code for the table was just all in one line, so I was thinking that he had some form of set string with input words inside that just gets appended to the end of the last thing in the table block of his html file

|

Ayo K · Accepted Answer · 2016-04-21 19:03:11Z

0

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>"

answered Apr 21, 2016 at 19:03

Ayo K

1,7842 gold badges23 silver badges37 bronze badges

Comments

jdphenix · Accepted Answer · 2016-08-19 00:23:38Z

0

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);

edited Aug 19, 2016 at 0:23

jdphenix

15.5k5 gold badges46 silver badges74 bronze badges

answered Aug 18, 2016 at 22:25

James Smith

11 silver badge

2 Comments

pr0gramista Over a year ago

This doesn't actually create a row. If var newRow = "<tr><th>Hammer</th><th>53</th><th>Red</th></tr>"; it would create a row with Item name: Hammer, item number: 53, item color: Red. You should also use selector as $("#inventory") to actually give working code.

James Smith Over a year ago

Okay, thanks a lot for your feedback, I'll do my best in the future

Collectives™ on Stack Overflow

Updating html table with input

4 Answers 4

8 Comments

7 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related