wps隔行填充效果斑马线

发布网友发布时间：2022-05-01 10:22

共2个回答

懂视网时间：2022-04-23 12:26

虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用JavaScript实现的是兼容性最强的（浏览器不支持或禁止JavaScript脚本除外），所以今天使用原生JS实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。本文主要和大家介绍了JavaScript实现的斑马线表格效果,通过javascript针对table表格的遍历与运算实现隔行变色功能,非常简单实用,需要的朋友可以参考下，希望能帮助到大家。

html表格部分：

<table>
 <thead>
 <tr>
 <th>Date</th>
 <th>City</th>
 <th>Venue</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>2017-06-25</td>
 <td>
 <abbr title="BeiJing">BJ</abbr>
 </td>
 <td>Ballroom</td>
 </tr>
 <tr>
 <td>2017-08-02</td>
 <td>
 <abbr title="ShangHai">SH</abbr>
 </td>
 <td>Yoyoyo</td>
 </tr>
 <tr>
 <td>2017-11-30</td>
 <td>
 <abbr title="HangZhou">HZ</abbr>
 </td>
 <td>NOW~</td>
 </tr>
 <tr>
 <td>2017-11-30</td>
 <td>
 <abbr title="HangZhou">HZ</abbr>
 </td>
 <td>NOW~</td>
 </tr>
 <tr>
 <td>2017-11-30</td>
 <td>
 <abbr title="ShiJiaZhuang">SJZ</abbr>
 </td>
 <td>NOW~</td>
 </tr>
 </tbody>
</table>

script.js

css部分：

* {
 margin: 0;
 padding: 0;
}
.stripe{
 background-color: #eee;
}

完整index.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>javascript斑马线表格</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 .stripe{
 background-color: #eee;
 }
 </style>
<script src="script.js"></script>
</head>
<body>
<table>
 <thead>
 <tr>
 <th>Date</th>
 <th>City</th>
 <th>Venue</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>2017-06-25</td>
 <td>
 <abbr title="BeiJing">BJ</abbr>
 </td>
 <td>Ballroom</td>
 </tr>
 <tr>
 <td>2017-08-02</td>
 <td>
 <abbr title="ShangHai">SH</abbr>
 </td>
 <td>Yoyoyo</td>
 </tr>
 <tr>
 <td>2017-11-30</td>
 <td>
 <abbr title="HangZhou">HZ</abbr>
 </td>
 <td>NOW~</td>
 </tr>
 <tr>
 <td>2017-11-30</td>
 <td>
 <abbr title="HangZhou">HZ</abbr>
 </td>
 <td>NOW~</td>
 </tr>
 <tr>
 <td>2017-11-30</td>
 <td>
 <abbr title="ShiJiaZhuang">SJZ</abbr>
 </td>
 <td>NOW~</td>
 </tr>
 </tbody>
</table>
<script>
stripeTable();
</script>
</body>
</html>

热心网友时间：2022-04-23 09:34

1、首先要打开WPS Office软件。2、用“所有线框”工具绘制一个表格。3、点击颜料桶，选中颜色，在第二排填充。4、用鼠标选中前两排表格。5、把鼠标放到单元格右下角的节点上，待“+”出来，用鼠标向下拖动到最后一列表格。6。表格隔行均匀填写完成。
在制作表格时我们经常会需要隔行进行填充以使表格更加直观好看，便于浏览，本文将为大家介绍如何快速进行隔行填充操作。
还可以进行数据填充，A2公式：=IF（C2=“户主“，COUNTIF（C$2：C2，“户主“），““）下拉。