Question

嗨我的表格如下，我想要做的是从单元格中获取当前值并增加1，然后将其打印回同一单元格中，所有内容如下所示。

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

Example

如果您必须对此进行调整以使用上述示例（绑定元素），那么您可以尝试以下操作：

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

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

Example

您可以阅读更多活动here或on MDN

Answer 2

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

这将获取ID为The_Dynamic_Cell的单元格，并将其值增加1.

动态添加内容到表格单元格

2 个答案: