How to dynamically change HTML table content using JavaScript

Question

var insert = document.getElementById('insertitem');
insert.addEventListener('click', function() {
  var table = document.getElementById('insertfirsttable'),
    itemType = prompt("Enter the item name"),
    filling1 = prompt("Enter the filling"),
    filling2 = prompt("Enter the filling"),
    filling3 = prompt("Enter the filling"),
    stock = prompt("Enter the amount in stock"),
    minimum_Stock = prompt("Enter the minimum amount of stock");

  for (var r = 0; r < 1; r += 1) {
    var x = document.getElementById('insertfirsttable').insertRow(r);
    for (var c = 0; c < 10; c += 1) {
      var y = x.insertCell(c);
    }

    table.rows[r].cells[0].innerHTML = itemType;
    table.rows[r].cells[1].innerHTML = filling1;
    table.rows[r].cells[2].innerHTML = filling2;
    table.rows[r].cells[3].innerHTML = filling3;
    table.rows[r].cells[4].innerHTML = stock;
    table.rows[r].cells[5].innerHTML = minimum_Stock;
    table.rows[r].cells[9].innerHTML = '<button id="sellbtn" style="width:102px; height: 25px; font-size:18px; cursor:pointer">Sell</button>';
    table.rows[r].cells[9].style.width = "100px";
    var sellBtn = document.getElementById("sellbtn");
  }
  //problem is here i guess
  sellBtn.addEventListener("click", function() {
    var sell = prompt("Enter the stock amount you're selling"),
      total = stock - sell;
    for (var t = 0; t < table; t += 1) {
      for (var c = 0; c < table.cells.length; c += 1) {}
      table.rows[t].cells[4].innerHTML = total;

    }
  });
});

body {
  margin: 0;
  padding: 0;
  background-color: #E6E6E6;
  font-size: 20px;
}
table {
  border-spacing: 1px;
  width: 100%;
}
th {
  padding: 1px;
}
#firsttablediv {
  width: 100%;
}
#firsttable {
  color: white;
  background-color: green;
}
#insertitem {
  width: 100%;
  padding: 2px;
  font-size: 20px;
  cursor: pointer;
}
#insertfirsttable > tr {
  background-color: #31B404;
}

<html>

<body>
  <div id="firsttablediv">
    <table id="firsttable" border="1">
      <thead>
        <th>Item</th>
        <th colspan="3">Filling</th>
        <th>Storage</th>
        <th>Minimum Stock</th>
        <th>Last Inventory</th>
        <th>Sell</th>
        <th>Last Month Inventory</th>
        <th colspan="2">
          <button id="insertitem">New Item</button>
        </th>
      </thead>
      <tbody id="insertfirsttable">
      </tbody>
    </table>
  </div>

Guys I'm writing an application for my father's shop. He wants an application to manage his items and such, anyways, after you click on the insert item button and input the details. The item is then put in a row with each detail in it's respective cell, also a button appears within that row called 'Sell' in which if an item has been sold you press on it and it asks you how many of that item you have sold? you type the number and then enter and it should subtract the stock number from that number and put in the new number in the stock cell of that row but i can't seem to know how to do it.

Do you have a sell button per row? If so, you're going to need to restructure the layout as all your sell buttons have the same id - sellbtn. IDs need to be unique. — James Thorpe
– James Thorpe, Commented Jan 9, 2015 at 11:56

Mahdi Jazini · Accepted Answer · 2016-11-13 07:49:25Z

11

JavaScript Area:

document.getElementById('test1').innerHTML = 'Night';

HTML Area:

<td id="test1">Day</td>

The JavaScript code changes the Day to Night

Also the Night value can be replaced with a HTML code.

For example <b>Night</b>

Source

answered Nov 13, 2016 at 7:49

Mahdi Jazini

81112 silver badges17 bronze badges

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

Comments

Si Kelly · Accepted Answer · 2015-01-10 12:24:23Z

There are a few things you can improve here. Firstly you don't need a for-loop to execute something only once:

for (var r = 0; r < 1; r += 1) {

Get rid of this loop.

So how do you get hold of the row that has just been inserted? Luckily Table.insertRow() returns a reference to the row that got inserted. So you can do:

var row = document.getElementById('insertfirsttable').insertRow();
row.cells[0].innerHTML = itemType;
//and so on

Also note that you don't need to pass an index to insertRow(), since a row automatically gets added at the end of the table. If you want it at the beginning, use insertRow(0). See here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow/

As James pointed out in the comments, you can't give all the buttons the same id. In that case how would you get a reference to the button to add the listener? Better create the element using document.createElement() instead, then you get a reference returned.

var button = document.createElement("button");
row.cells[9].appendChild(button);

button.addEventListener("click", function(){
   var sell = prompt("Enter the stock amount you're selling"),
   total = stock - sell;

   // we still have a reference to row here because we are in a closure.
   row.cells[4].innerHTML = total;
});

score 0 · Accepted Answer · 2015-01-09 12:19:21Z

0

Instead of using 'stock'where you subtract from the sell value, get the 'stock' element from the row based on the ID, convert to number and then subtract.

And there's something called JQuery for stuff like this. You could give it a try. Specifically the .on() method will work here. When you add a button dynamically usually the event-handlers are not hooked on to the new button. This will cause your code to stop working. So use the JQuery on() method instead.

Also ID's are supposed to be unique. So create unique ID values for your buttons may be using the index.

edited Jan 9, 2015 at 12:19

answered Jan 9, 2015 at 11:58

user3830198

1 Comment

Murad Elboudy Over a year ago

How do i do it with jQuery then?

Collectives™ on Stack Overflow

How to dynamically change HTML table content using JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related