[英]Dynamically adding Content to a table Cell
Hi My table is as follows, what i want to do is get the current value from the cell and increase by one and then print it back in the same cell, Everything is illustrated below. 嗨,我的表如下,我想做的是从单元格中获取当前值,并增加一个,然后将其打印回同一单元格中,所有内容如下图所示。
<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>
The Java Script 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.
}
How can I achieve the above? 如何实现以上目标? Thanks in advance 提前致谢
Suggestion, don't bind events within the DOM element. 建议不要在DOM元素内绑定事件。 Here's a simple way to bind a click event. 这是绑定click事件的一种简单方法。 Notice that the jsfiddle option No Wrap - in body
- Basically this means that you have a script
tag at the end (inside) your body
tag to make sure the elements have rendered in the DOM by the time you run this code: 请注意,选择的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;
}
If you must adapt this to work with your above example (binding on the element), then you can try the following: 如果您必须使它适应上面的示例(在元素上绑定),则可以尝试以下操作:
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;
}
This will get the cell with ID The_Dynamic_Cell
and will increment its value by 1. 这将获得ID为The_Dynamic_Cell
的单元格,并将其值增加1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.