Javascript 向表单元格动态添加内容

您好，我的表格如下，我想做的是从单元格中获取当前值并增加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>

---

我怎样才能实现上述目标？提前感谢您的建议，不要在DOM元素中绑定事件。下面是一种绑定单击事件的简单方法。请注意，JSFIDLE选项

No Wrap-in body

——基本上这意味着您在

body

标记的末尾（内部）有一个

script

标记，以确保在运行此代码时元素已呈现在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; 
}

您可以阅读更多事件或事件

---

这将获得ID为

的单元格\u Dynamic\u cell

，并将其值增加1。

没有Jquery，我不能使用任何外部库。@mohamedrias-谢谢，只是想确保OP知道在JS中而不是在元素中绑定事件是最好的。关注点分离：DI建议使用document.getElementById（），因为用户只想使用ID。querySelector是一个很好的选择，因为它使用CSS选择器。但是它在旧浏览器中不受支持。@mohamedrias-是的，这里有一些东西需要更改以获得一个健壮的示例，但对于一个简单的示例，它可以做到：感谢提供信息的答案，它工作得很好…：）@user2627018-我很高兴你发现它很有用=）谢谢你的答案，希望我能接受这两个答案。这也很好……）

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

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

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