Как динамически изменять содержимое таблицы HTML с использованием 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 Я пишу приложение для магазина моего отца. Он хочет, чтобы приложение управляло своими товарами и так далее, в любом случае, после нажатия кнопки вставки и ввода деталей. Затем элемент помещается в строку с каждой деталью в соответствующей ячейке, также появляется кнопка внутри этой строки, называемая «Sell», в которой, если предмет был продан, вы нажимаете на него, и он спрашивает вас, сколько из этого элемента у вас есть продан? вы вводите номер и затем вводите его, и он должен вычесть номер запаса из этого числа и ввести новый номер в ячейку ячейки этой строки, но я не могу понять, как это сделать.

источник

2015-01-09 Murad Elboudy

У вас есть кнопка распродажу для каждой строки? Если это так, вам понадобится реструктурировать макет, так как все ваши кнопки продажи имеют одинаковый идентификатор - 'sellbtn'. Идентификаторы должны быть уникальными. –

-1

Вместо использования 'stock', где вы вычитаете из стоимости продажи, получите элемент «акции» из строки на основе идентификатора, конвертируйте в число и затем вычтите.

И что-то, что называется JQuery для таких вещей. Вы можете попробовать. В частности, здесь будет работать .on() method. При добавлении кнопки динамически обычно обработчики событий не подключаются к новой кнопке. Это приведет к тому, что ваш код перестанет работать. Поэтому вместо этого используйте JQuery on().

Также идентификаторы должны быть уникальными. Поэтому для создания уникальных идентификационных значений для ваших кнопок можно использовать индекс.

источник

2015-01-09 11:58:53 Arunster

Как мне это сделать с помощью jQuery? –

Есть несколько вещей, которые вы можете улучшить здесь. Во-первых, вам не нужен цикл for для выполнения чего-то только один раз:

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

Избавьтесь от этого цикла.

Итак, как вы можете получить строку, которая только что была вставлена? К счастью, Table.insertRow() возвращает ссылку на вставленную строку. Так что вы можете сделать:

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

отметить также, что вам не нужно, чтобы передать индекс insertRow(), поскольку строка автоматически добавляется в конце таблицы. Если вы хотите в начале, используйте insertRow (0). См. Здесь: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow/

Как отметил Джеймс в комментариях, вы не можете дать всем кнопкам одинаковый идентификатор. В этом случае, как бы вы получили ссылку на кнопку, чтобы добавить слушателя? Лучше создайте элемент, используя вместо этого document.createElement(), после чего вы получите возвращаемую ссылку.

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

источник

2015-01-10 12:14:57

JavaScript Площадь:

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

HTML Площадь:

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

Код JavaScript изменяется на День в Night

Также Night Значение может быть заменено на HTML код.

Например <b>Night</b>

Source

источник

2016-11-13 07:49:25

Как динамически изменять содержимое таблицы HTML с использованием JavaScript

ответ

Смежные вопросы