動態將內容添加到表格單元格

Question

嗨，我的表如下，我想做的是從單元格中獲取當前值，並增加一個，然后將其打印回同一單元格中，所有內容如下圖所示。

<table>
        <thead>
            <tr>
                <th width="5%">No</th>
                <th width="10%">Model No</th>
                <th width="15%">Model/Make</th>
                <th width="20%">Price</th>
                <th width="20%">Available Quantity</th>
                <th width="20%">Add to or Remove from Cart</th>
                <th width="10%">No of Items</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>1</td>
                <td>001</td>
                <td>SONY</td>
                <td>5000</td>
                <td>10 Units</td>               
                <td align="center">
                <input type="image" src="images/add.png" name="add" id="add" onclick="add();"/>
                </td>
                <td id="The_Dynamic_Cell">0</td>

            </tr>

        </tbody>
    </table>

Java腳本

function add(){

Get the current Content of the cell (id="The_Dynamic_Cell") and increase the value by 1 (content++) and re populate the cell with new value. 

}

如何實現以上目標？ 提前致謝

Answer 1

建議不要在DOM元素內綁定事件。 這是綁定click事件的一種簡單方法。 請注意，選擇的jsfiddle No Wrap - in body -這基本上意味着你有一個script在結束（內部）的標簽body的標簽，以確保元素通過運行這段代碼時的DOM已經使：

var addButton = document.querySelector("#add");
var cell = document.querySelector("#The_Dynamic_Cell");

addButton.onclick = function add(e){
    cell.innerText =  parseInt(cell.innerText, 10) + 1; 
}

例

如果您必須使它適應上面的示例（在元素上綁定），則可以嘗試以下操作：

var cell = document.querySelector("#The_Dynamic_Cell");

function add(e){
    cell.innerText =  parseInt(cell.innerText, 10) + 1; 
}

例

您可以在此處或在MDN上閱讀更多事件

Answer 2

   function add() {
     var tdEle = document.getElementById("The_Dynamic_Cell");
     tdEle.innerText = parseInt(tdEle.innerText, 10) +1;
   }

這將獲得ID為The_Dynamic_Cell的單元格，並將其值增加1。