html如何设置报表

当前位置：首页 > 前端开发 > html如何设置报表

详情介绍

ML设置报表可通过CSS样式布局，或用HTML报表生成器如FineReport拖放操作

HTML中设置报表有多种方法,以下是一些常见的方式：

使用HTML表格元素构建基础报表结构

HTML中的<table>标签是构建报表的基础元素，它由<thead>（表头）、<tbody>（表体）和<tfoot>（表尾）组成，要创建一个简单的员工信息报表,可以这样写：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>部门</th>
      <th>职位</th>
      <th>薪资</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>技术部</td>
      <td>工程师</td>
      <td>8000</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>市场部</td>
      <td>专员</td>
      <td>6000</td>
    </tr>
  </tbody>
</table>

在这个例子中，<table>标签创建了一个表格，<thead>中的<tr>定义了表头行，<th>表示表头单元格，用于显示列名。<tbody>中的<tr>定义了数据行，<td>表示数据单元格，填充了具体的员工信息。border="1"属性为表格添加了边框,使其更清晰易读。

利用CSS美化报表样式

CSS可以对HTML报表进行样式美化，使其更具吸引力和可读性，可以通过内联样式、内部样式表或外部样式表来应用CSS,使用内部样式表来美化上述员工信息报表：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tr:hover {
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>部门</th>
        <th>职位</th>
        <th>薪资</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>技术部</td>
        <td>工程师</td>
        <td>8000</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>市场部</td>
        <td>专员</td>
        <td>6000</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

在这个示例中，通过CSS设置了表格的宽度为80%，并使其在页面中水平居中。border-collapse: collapse;属性使表格边框合并，看起来更简洁。th, td选择器设置了表头和数据单元格的内边距、文本对齐方式和边框样式。th选择器还为表头设置了背景颜色。tr:nth-child(even)选择器使偶数行的背景颜色变浅，以区分不同行。tr:hover选择器则实现了当鼠标悬停在行上时，改变背景颜色的效果,增强了用户体验。

添加交互功能增强报表实用性

排序功能

可以使用JavaScript来实现表格数据的排序,为用户信息报表添加按姓名排序的功能：

<!DOCTYPE html>
<html>
<head>报表示例</title>
  <style>
    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ddd;
    }
    th {
      cursor: pointer;
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table id="reportTable">
    <thead>
      <tr>
        <th onclick="sortTable(0)">姓名</th>
        <th>部门</th>
        <th>职位</th>
        <th>薪资</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>技术部</td>
        <td>工程师</td>
        <td>8000</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>市场部</td>
        <td>专员</td>
        <td>6000</td>
      </tr>
    </tbody>
  </table>
  <script>
    function sortTable(n) {
      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
      table = document.getElementById("reportTable");
      switching = true;
      dir = "asc"; 
      while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length 1); i++) {
          shouldSwitch = false;
          x = rows[i].getElementsByTagName("TD")[n];
          y = rows[i + 1].getElementsByTagName("TD")[n];
          if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
              shouldSwitch = true;
              break;
            }
          } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
              shouldSwitch = true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          switchcount++;      
        } else {
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
    }
  </script>
</body>
</html>

在这个代码中，当用户点击“姓名”列的表头时，会调用sortTable(0)函数，其中参数0表示按照第一列（即姓名列）进行排序，函数内部通过比较相邻行的数据，来决定是否交换行的位置，从而实现升序或降序排序。dir变量用于记录当前的排序方向,每次点击表头时会切换排序方向。

筛选功能

同样可以使用JavaScript实现表格数据的筛选,为用户信息报表添加按部门筛选的功能：

<!DOCTYPE html>
<html>
<head>报表示例</title>
  <style>
    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <label for="departmentFilter">部门筛选:</label>
  <select id="departmentFilter" onchange="filterTable()">
    <option value="">全部</option>
    <option value="技术部">技术部</option>
    <option value="市场部">市场部</option>
  </select>
  <br><br>
  <table id="reportTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>部门</th>
        <th>职位</th>
        <th>薪资</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>技术部</td>
        <td>工程师</td>
        <td>8000</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>市场部</td>
        <td>专员</td>
        <td>6000</td>
      </tr>
    </tbody>
  </table>
  <script>
    function filterTable() {
      var input, filter, table, tr, td, i, j;
      input = document.getElementById("departmentFilter");
      filter = input.value.toUpperCase();
      table = document.getElementById("reportTable");
      tr = table.getElementsByTagName("tr");
      for (i = 1; i < tr.length; i++) { // 从第二行开始，跳过表头
        td = tr[i].getElementsByTagName("td")[1]; // 获取第二列（部门列）的单元格
        if (td) {
          if (filter === "" || td.innerText.toUpperCase() === filter) {
            tr[i].style.display = ""; // 显示符合条件的行
          } else {
            tr[i].style.display = "none"; // 隐藏不符合条件的行
          }
        }       
      }
    }
  </script>
</body>
</html>

在这个示例中，当用户从下拉菜单中选择一个部门时，会调用filterTable()函数，函数首先获取用户选择的筛选条件，然后遍历表格的每一行，检查第二列（部门列）的值是否与筛选条件匹配，如果匹配，则显示该行；否则，隐藏该行,这样就能实现按部门筛选报表数据的功能。

嵌入图表丰富报表内容

为了使报表更加直观和有说服力，可以嵌入图表来展示数据，可以使用JavaScript图表库，如Chart.js、ECharts等，以下是使用Chart.js在报表中嵌入柱状图的示例：

<!DOCTYPE html>
<html>
<head>报表示例</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
    }
    th, td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    #chartContainer {
      width: 80%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <h2>员工薪资报表</h2>
  <table id="reportTable">
    <thead>
      <tr>
        <th>姓名</th>
        <th>部门</th>
        <th>职位</th>
        <th>薪资</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>技术部</td>
        <td>工程师</td>
        <td>8000</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>市场部</td>
        <td>专员</td>
        <td>6000</td>
      </tr>
    </tbody>
  </table>
  <div id="chartContainer">
    <canvas id="salaryChart"></canvas>
  </div>
  <script>
    var ctx = document.getElementById('salaryChart').getContext('2d');
    var chartData = {
      labels: ['张三', '李四'], // 从表格中获取姓名作为标签
      datasets: [{
        label: '薪资', // 数据集名称
        data: [8000, 6000], // 从表格中获取薪资数据作为数据点
        backgroundColor: ['rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)'], // 柱状图颜色
        borderColor: ['rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)'], // 柱状图边框颜色
        borderWidth: 1 // 柱状图边框宽度
      }]
    };
    var salaryChart = new Chart(ctx, { // 创建图表实例并传入配置项和上下文对象（画布）来渲染图表到页面上，这里使用了柱状图类型（bar），可以根据需要更改为其他类型（如折线图、饼图等），同时传入了之前定义好的chartData作为数据源以及相关配置项（如标题、图例等），最后将整个图表渲染到了id为"salaryChart"的canvas元素上，这样就成功地将一个基于表格数据的柱状图嵌入到了HTML报表中，用户可以在查看报表的同时直观地看到各个员工的薪资对比情况，此外还可以根据需求进一步自定义图表的样式和交互功能以满足特定的业务需求，比如可以添加工具提示来显示更多关于数据点的信息或者允许用户通过点击图表元素来触发某些操作等等，这都需要结合具体的业务场景和用户需求来进行设计和开发，type: 'bar', // 图表类型为柱状图data: chartData, // 传入数据选项options: {scales: {yAxes: [{ticks: {beginAtZero: true // y轴从0开始显示} } ] } } } ); } ); </script> </

ML 报表

html如何设置报表

使用HTML表格元素构建基础报表结构

利用CSS美化报表样式

添加交互功能增强报表实用性

排序功能

筛选功能

嵌入图表丰富报表内容

linux如何连接数据库

为什么word里面有的字下面有线

强势推荐

html如何设置报表

使用HTML表格元素构建基础报表结构

利用CSS美化报表样式

添加交互功能增强报表实用性

排序功能

筛选功能

嵌入图表丰富报表内容

linux如何连接数据库

为什么word里面有的字下面有线

相关文章

强势推荐