JavaScript修改td单元格内容

快乐打工仔 分类:实例代码

JavaScript修改td单元格内容属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它实现了使用javascript动态修改td单元格内容的功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.datalist {
  border: 1px solid #429fff; /* 表格边框 */
  font-family: Arial;
  border-collapse: collapse; /* 边框重叠 */
}
.datalist tr:hover {
  background-color: #c4e4ff; /* 动态变色,IE6下无效!*/
}
.datalist caption {
  padding-top: 3px;
  padding-bottom: 2px;
  font: bold 1.1em;
  background-color: #f0f7ff;
  border: 1px solid #429fff; /* 表格标题边框 */
}
.datalist th {
  border: 1px solid #429fff; /* 行、列名称边框 */
  background-color: #d2e8ff;
  font-weight: bold;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
.datalist td {
  border: 1px solid #429fff; /* 单元格边框 */
  text-align: right;
  padding: 4px;
}
</style>
<script language="javascript">
window.onload=function(){
  var oTable = document.getElementById("mytable");
  //修改单元格内容
  oTable.rows[3].cells[4].innerHTML = "www.pipipi.net";
}
</script>
</head>
<body>
<table id="mytable" class="datalist" summary="财政报表">
  <caption>报表 2005 - 2008</caption>
  <thead>
    <tr>
      <th> </th>
      <th scope="col">2005</th>
      <th scope="col">2006</th>
      <th scope="col">2007</th>
      <th scope="col">2008</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">拨款</th>
      <td>11,980</td>
      <td>12,650</td>
      <td>9,700</td>
      <td>10,600</td>
    </tr>
    <tr>
      <th scope="row">捐款</th>
      <td>4,780</td>
      <td>4,989</td>
      <td>6,700</td>
      <td>6,590</td>
    </tr>
    <tr>
      <th scope="row">投资</th>
      <td>8,000</td>
      <td>8,100</td>
      <td>8,760</td>
      <td>8,490</td>
    </tr>
    <tr>
      <th scope="row">募捐</th>
      <td>3,200</td>
      <td>3,120</td>
      <td>3,700</td>
      <td>4,210</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">2008 年统计</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

上面的代码实现了我们的要求,更多内容可以参阅相关阅读。

相关阅读:

(1).rows参阅JavaScript rows属性一章节。

(2).cells参阅JavaScript cells一章节。

(3).innerHTML参阅JavaScript innerHTML一章节。

JavaScript修改td单元格内容,这样的场景在实际项目中还是用的比较多的,关于JavaScript修改td单元格内容就介绍到这了。

回复

我来回复
  • 暂无回复内容