CODEWITHSUNDEEP
javascripthtml
Murad Elboudy
Murad Elboudy

Reputation: 117

How to dynamically change HTML table content using JavaScript

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.

Upvotes: 6

Views: 45169

Answers (3)

Mahdi Jazini
Mahdi Jazini

Reputation: 791

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

Upvotes: 11

Si Kelly
Si Kelly

Reputation: 703

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

Upvotes: 1

user3830198
user3830198

Reputation:

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.

Upvotes: 0

Related Questions