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>

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.

Share Improve this question asked Jan 9, 2015 at 11:52 Murad Elboudy 1172 gold badges2 silver badges11 bronze badges

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 Commented Jan 9, 2015 at 11:56

Add a comment |

3 Answers 3

Sorted by: Reset to default 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

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

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How to dynamically change HTML table content using JavaScript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)