0%

javascript修改td的值

这篇文章主要介绍“JS中修改td值有几种方法,代码如何写”的相关知识,下面会通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强。

javascript修改td值的方法:
1、利用innerHTML属性,语法“指定td节点.innerHTML = “新内容”;”;
2、利用innerText属性,语法“指定td节点.innerText = “新内容”;”。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

javascript修改td的值

方法1:利用innerHTML属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<tr>
<th>商品</th>
<th>价格</th>
</tr>
<tr>
<td>T恤</td>
<td id="xg">¥100</td>
</tr>
<tr>
<td>牛仔褂</td>
<td>¥250</td>
</tr>
<tr>
<td>牛仔库</td>
<td>¥150</td>
</tr>
</table>
<button onclick="myFunction()">修改td的值</button>
<script type="text/javascript">
function myFunction() {
var xtd = document.getElementById('xg');
xtd.innerHTML = "¥120";
xtd.style.color="red";
}
</script>
</body>
</html>

img

方法2:利用innerText属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<tr>
<th>商品</th>
<th>价格</th>
</tr>
<tr>
<td>T恤</td>
<td>¥100</td>
</tr>
<tr>
<td>牛仔褂</td>
<td id="xg">¥250</td>
</tr>
<tr>
<td>牛仔库</td>
<td>¥150</td>
</tr>
</table>
<button onclick="myFunction()">修改td的值</button>
<script type="text/javascript">
function myFunction() {
var xtd = document.getElementById('xg');
xtd.innerText = "¥200";
xtd.style.color="red";
}
</script>
</body>
</html>

img

这篇关于“JS中修改td值有几种方法,代码如何写”的文章就介绍到这了,更多相关的内容,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!