加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript HTML 对象实例

JavaScript基础 2022-04-25 01:55:24小码哥的IT人生shichen

JavaScript HTML 对象实例

使用 JavaScript 访问和操作 HTML 对象

Anchor 对象

完整实例【查找链接的 href 属性的值】：

<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" href="http://www.phpcodeweb.com/">phpcodeweb</a></p>
<p>单击按钮以显示上面链接的 href 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myAnchor").href;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找链接的 hreflang 属性的值】：

<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" hreflang="zh-cn" href="http://www.phpcodeweb.com">phpcodeweb.com</a></p>
<p>单击按钮以显示上面链接的 hreflang 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myAnchor").hreflang;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找链接的 id 属性的值】：

<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" href="http://www.phpcodeweb.com/">phpcodeweb</a></p>
<p>单击按钮以显示上面链接的 id 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myAnchor").id;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找链接的 rel 属性的值】：

<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" rel="nofollow" href="http://www.phpcodeweb.com/">phpcodeweb</a></p>
<p>单击按钮以显示上面链接的 rel 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myAnchor").rel;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找链接的 target 属性的值】：

<!DOCTYPE html>
<html>
<body>
<p><a id="w3s" target="_self" href="http://www.phpcodeweb.com/">phpcodeweb</a></p>
<p>单击按钮以显示上面链接的 target 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("w3s").target;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找链接的 type 属性的值】：

<html>
<body>
<p><a id="myAnchor" type="text/html" href="http://www.phpcodeweb.com">phpcodeweb.com</a></p>
<p>单击按钮以显示上面链接的 type 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myAnchor").type;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Area 对象

完整实例【查找图像映射区域的备用文本】：

<html>
<body>
<img src="/skin/i/eg_planets.jpg"
usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle" 
coords="180,139,14" 
alt="The planet Venus"
href="/demo/example/hdom/venus.html" />
</map>
<p>"Venus" 的替代文本是：
<script type="text/javascript">
x=document.getElementById('venus');
document.write(x.alt);
</script>
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的坐标】：

<html>
<body>
<img src="/skin/i/eg_planets.jpg" 
usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle" 
coords="180,139,14" 
alt="Venus"
href="/demo/example/hdom/venus.html" />
</map>
<p>Venus 的坐标（coords 属性）是：
<script type="text/javascript">
x=document.getElementById("venus");
document.write(x.coords);
</script>
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【确定一个区域的形状】：

<html>
<body>
<img src="/skin/i/eg_planets.jpg"
usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle" 
coords="180,139,14" 
alt="Venus"
href="/demo/example/hdom/venus.html" />
</map>
<p>Venus area 的 shape 属性是：
<script type="text/javascript">
x=document.getElementById("venus");
document.write(x.shape);
</script>
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的 href】：

<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('venus').href="http://www.phpcodeweb.com"
}
</script>
</head>
<body>
<p>请点击金星（Venus）：</p>
<img src="/skin/i/eg_planets.jpg" 
usemap="#planetmap" />
<map name="planetmap">
<area
id="venus"
shape="circle"
coords="180,139,14"
href ="/demo/example/html/venus.html"
alt="Venus" />
</map>
<input type="button" onclick="changeLink()" value="改变链接" />
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的 href 属性的协议部分】：

<html>
<body>
<img src="/skin/i/eg_planets.jpg"
usemap="#planetmap" />
<map name="planetmap">
<area
id="venus"
shape="circle"
coords="180,139,14"
href ="/demo/example/html/venus.html"
alt="Venus" />
</map>
<p>Venus 的协议：
<script type="text/javascript">
x=document.getElementById('venus');
document.write(x.protocol);
</script>
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的 href 属性的域名部分】：

<html>
<body>
<img src="/skin/i/eg_planets.jpg"
usemap="#planetmap" />
<map name="planetmap">
<area
id="venus"
shape="circle"
coords="180,139,14"
href ="/demo/example/html/venus.html"
alt="Venus" />
</map>
<p>"Venus" 区域的 hostname 和 port 是：
<script type="text/javascript">
x=document.getElementById('venus');
document.write(x.host);
</script>
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的 href 属性的端口号部分】：

<!DOCTYPE html>
<html>
<body>
<img src="/skin/i/eg_planets.jpg" usemap="#planetmap" />
<map name="planetmap">
<area
id="venus"
shape="circle"
coords="180,139,14"
href ="/demo/example/html/venus.html"
alt="Venus" />
</map>
<p>单击按钮以显示图像映射中“venus”区域的 href 属性的端口。</p>
<p><b>注释：</b>如果未在 URL 中指定端口部分，或者端口号为 80（默认值），则某些浏览器将仅显示 0 或不显示任何内容。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("venus").port;
  document.getElementById("demo").innerHTML = "端口：" + x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的 href 属性的路径名部分】：

<!DOCTYPE html>
<html>
<body>
<img src="/skin/i/eg_planets.jpg"
usemap="#planetmap" />
<map name="planetmap">
<area
id="venus"
shape="circle"
coords="180,139,14"
href ="/demo/example/html/venus.html"
alt="Venus" />
</map>
<p>单击按钮以显示图像映射中“venus”区域的 href 属性的路径名。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("venus").pathname;
  document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的 href 属性的查询字符串部分】：

<!DOCTYPE html>
<html>
<body>
<img src="/skin/i/eg_planets.gif" 
width="145" height="126" 
usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle" 
coords="124,58,8" 
alt="Venus"
href="/demo/example/hdom/venus.html?id=venus" />
</map>
<p>单击按钮以显示“venus”区域的 href 属性的查询字符串部分。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("venus").search;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的 href 属性的 hash 部分】：

<!DOCTYPE html>
<html>
<body>
<img src="/skin/i/eg_planets.jpg"
usemap="#planetmap" />
<map name="planetmap">
<area
id="venus"
shape="circle"
coords="180,139,14"
href ="/example/hdom/venus2.html#top"
alt="Venus" />
</map>
<p>单击按钮以显示“venus”区域的 href 属性的锚点部分。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("venus").hash;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找区域的 target 属性的值】：

<!DOCTYPE html>
<html>
<body>
<img src ="/skin/i/eg_planets.jpg"
alt="Planets"
usemap ="#planetmap" />
<map name ="planetmap">
<area shape ="circle" coords ="180,139,14"
href ="/demo/example/hdom/venus.html" id="venus" 
target="_self"/>
</map>
<p>单击按钮可返回图像映射中“venus”区域的 target 属性值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("venus").target;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Base 对象

完整实例【查找页面中所有相对 URL 的基准 URL】：

<!DOCTYPE html>
<html>
<head>
<base id="myBaseId" href="http://www.phpcodeweb.com/" />
</head>
<body>
<p>单击按钮以显示 base 元素的 href 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myBaseId").href;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找页面上所有链接的基准目标】：

<html>
<head>
<base id="myBaseId" target="_blank"
href="http://www.phpcodeweb.com/" />
</head>
<body>
<p>单击按钮以显示 base 元素的 target 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myBaseId").target;
  document.getElementById("demo").innerHTML = "所有链接的基准目标是：" + x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

IFrame 对象

完整实例【改变 iframe 的背景色】：

<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/demo/demo_iframe.html"></iframe>
<p>单击按钮可更改iframe中包含的文档的背景颜色。</p>
<p id="demo"></p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
  var x = document.getElementById("myframe");
  var y = x.contentDocument;
  y.body.style.backgroundColor = "red";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【确定 iframe 的高度】：

<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/index.html" height="250" width="450">
<p>您的浏览器并不支持 iframe。</p>
</iframe>
<p>单击按钮以显示 iframe 的高度。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myframe").height;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找 iframe 的 name 属性的值】：

<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/index.html" name="iframe_a"></iframe>
<p>单击按钮以返回 iframe 的名称。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myframe").name;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找 iframe 的源属性（src）】：

<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/index.html"></iframe>
<p>单击按钮以在 iframe 中显示 src 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myframe").src;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【改变 iframe 的源属性（src）】：

<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/index.html"></iframe>
<p>单击按钮以更改 iframe 中的 src 属性。</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
  document.getElementById("myframe").src = "/demo/demo_iframe.html";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Image 对象

完整实例【查找图像的替代文本】：

<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="/skin/i/shanghai_lupu_bridge.jpg" alt="上海卢浦大桥" width="350" height="234">
<p>单击按钮以显示图像的替代文本。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myImg").alt;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【确定图像的高度】：

<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="/skin/i/shanghai_lupu_bridge.jpg" alt="上海卢浦大桥" width="350" height="234">
<p>单击按钮以显示图像的高度。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myImg").height;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【单击以显示图像的高分辨率版本】：

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage() {
  document.getElementById('myimage').src = "/skin/i/tulip_flaming_club.jpg";
}
</script>
<img id="myimage" onclick="changeImage()" src="/skin/i/tulip_flaming_club_s.jpg" />
<p>单击图像以显示高分辨率版本。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找图像的源（src）】：

<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="/skin/i/shanghai_lupu_bridge.jpg" alt="上海卢浦大桥" width="350" height="234">
<p>单击按钮以显示图像的 src 属性。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("myImg").src;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【改变图像的源】：

<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="/skin/i/eg_bulboff.gif" />
<br><br>
<button onclick="document.getElementById('myImg').src='/skin/i/eg_bulbon.gif'">On</button>
<button onclick="document.getElementById('myImg').src='/skin/i/eg_bulboff.gif'">Off</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【改变灯泡的源】：

<!DOCTYPE html>
<html>
<body>
<img id="myImage" onclick="changeImage()" src="/skin/i/eg_bulboff.gif" />
<p>单击灯泡打开/关闭灯。</p>
<script>
function changeImage() {
  var image = document.getElementById('myImage');
  if (image.src.match("bulbon")) {
    image.src = "/skin/i/eg_bulboff.gif";
  } else {
    image.src = "/skin/i/eg_bulbon.gif";
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找图像的 usemap 属性的值】：

<html>
<body>
<img id="planets"
src="/skin/i/eg_planets.jpg" 
usemap="#planetmap" />
<map name="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/demo/example/html/venus.html"
target ="_blank"
alt="Venus" />
</map>
<p>单击按钮以显示图像的 usemap 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
  var x = document.getElementById("planets").useMap;
  document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Table 对象

完整实例【改变表格边框的宽度】：

<!DOCTYPE html>
<html>
<head>
<script>
function changeBorder(id) {
  document.getElementById(id).style.border = "5px solid";
}
</script>
</head>
<body>
<table style="border:1px solid black" id="myTable">
  <tr>
    <td>100</td>
    <td>200</td>
  </tr>
  <tr>
    <td>300</td>
    <td>400</td>
  </tr>
</table>
<p>
<input type="button" onclick="changeBorder('myTable')" value="更改边框">
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【改变表格的内边距】：

<!DOCTYPE html>
<html>
<head>
<script>
function padding(id) {
  document.getElementById(id).style.padding = "15px";
}
</script>
</head>
<body>
<table id="myTable" style="border:1px solid black">
  <tr>
    <td>100</td>
    <td>200</td>
  </tr>
  <tr>
    <td>300</td>
    <td>400</td>
  </tr>
</table>
<p>
<input type="button" onclick="padding('myTable')" value="更改内边距">
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【查找单元格的 innerHTML】：

<!DOCTYPE html>
<html>
<head>
<script>
function getCellContent(id) {
  var x = document.getElementById(id).rows[0].cells;
  document.getElementById("demo").innerHTML = x[0].innerHTML;
}
</script>
</head>
<body>
<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<p>
<input type="button" onclick="getCellContent('myTable')" value="显示第一个单元格">
</p>
<p id="demo"></p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【创建表格标题】：

<!DOCTYPE html>
<html>
<head>
<script>
function createCaption(id) {
  document.getElementById(id).createCaption().innerHTML = "我的新标题";
}
</script>
</head>
<body>
<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
</table>
<p>
<input type="button" onclick="createCaption('myTable')" value="创建标题">
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【删除表格中的行】：

<!DOCTYPE html>
<html>
<body>
<table id="myTable" style="padding:8px;border:1px solid black">
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>62</td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td>
    <td>56</td>
  </tr>
  <tr>
    <td>Elon</td>
    <td>Musk</td>
    <td>47</td>
  </tr>
</table>
<p>
<input type="button" value="删除一行"
onclick="document.getElementById('myTable').deleteRow(0)">
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【向表格中添加行】：

<!DOCTYPE html>
<html>
<head>
<script>
function insRow(id) {
  var x = document.getElementById(id).insertRow(0);
  var y = x.insertCell(0);
  var z = x.insertCell(1);
  y.innerHTML = z.innerHTML = "New";
}
</script>
</head>
<body>
<table id="myTable" style="border: 1px solid black">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<p>
<input type="button" onclick="insRow('myTable')" value="插入行">
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例【改变表格单元格的内容】：

<!DOCTYPE html>
<html>
<head>
<script>
function changeContent(id, row, cell, content) {
  var x = document.getElementById(id).rows[row].cells;
  x[cell].innerHTML = content;
}
</script>
</head>
<body>
<table id="myTable" border="1">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<p>
<input type="button" onclick="changeContent('myTable', 0, 0, 'Hello')" value="更改内容">
</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024