表格制作javascript_表格制作图表

温馨提示：这篇文章已超过287天没有更新，请注意相关的内容是否还可用！

表格是网页中常用的一种数据展示方式，通过使用JavaScript可以实现表格的制作和图表的展示。我们可以使用HTML和CSS来创建一个基本的表格结构，然后通过JavaScript来填充表格数据和添加样式。

在HTML中，我们可以使用`<table>`元素来创建一个表格，`<tr>`元素表示表格的行，`<td>`元素表示表格的单元格。通过嵌套使用这些元素，我们可以创建一个简单的表格结构。

示例代码如下：


<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

上述代码创建了一个包含3行3列的表格，第一行是表头，包含姓名、年龄和性别三个列名，后面两行是具体的数据。

接下来，我们可以使用JavaScript来动态地填充表格数据。通过获取表格元素的引用，我们可以使用`insertRow()`和`insertCell()`方法来添加新的行和单元格，然后使用`innerHTML`属性来设置单元格的内容。

示例代码如下：


<script>
  var table = document.querySelector('table');
  // 添加新的行
  var newRow = table.insertRow();
  // 添加新的单元格，并设置内容
  var nameCell = newRow.insertCell();
  nameCell.innerHTML = '王五';
  var ageCell = newRow.insertCell();
  ageCell.innerHTML = '30';
  var genderCell = newRow.insertCell();
  genderCell.innerHTML = '男';
</script>

上述代码通过JavaScript动态地在表格中添加了一行数据，姓名为"王五"，年龄为"30"，性别为"男"。

除了填充表格数据，我们还可以使用JavaScript来添加样式和交互效果。通过修改表格元素的`className`属性，我们可以为表格添加CSS类，从而改变表格的样式。

示例代码如下：


<style>
  .highlight {
    background-color: yellow;
  }
</style>
<script>
  var table = document.querySelector('table');
  // 获取所有的单元格
  var cells = table.querySelectorAll('td');
  // 遍历单元格，为奇数行的单元格添加高亮样式
  for (var i = 0; i < cells.length; i++) {
    if (i % 2 === 0) {
      cells[i].classList.add('highlight');
    }
  }
</script>