网页复选框按钮提示弹框功能及文本明文与密文切换（前端）

  1. 模板中D2单元格默认为加密状态，参数面板有一个复选框按钮。
  2. 复选框按钮勾选时，显示单元格原值，其值需动态根据当前行B2单元格的值去ds1中的中止字段获取
  3. 复选框按钮勾选时，弹出确认框，信息如下图所示，如点击确定则显示D2值，如点击取消则不显示，并且将复选框按钮重置为未勾选状态
  4. 取消勾选复选框按钮时，不需要弹出确认框，直接将D2单元格值重置为***即可

  5.  

你是用的什么框架，还是纯js+html代码？

是纯js+html代码的话

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#tab {
	border-collapse: collapse;
	width: 600px;
}
</style>
</head>

<body onload="details()">

<input type="checkbox" id="checkid" onchange="details()" />显示详情
<table id="tab" border="1">
	<tr>
		<th>产品名称</th>
		<th>单价</th>
		<th>中止</th>
	</tr>
	<tr>
		<td>aaa</td>
		<td>64</td>
		<td>是</td>
	</tr>
	<tr>
		<td>bbb</td>
		<td>48</td>
		<td>否</td>
	</tr>
	<tr>
		<td>ccc</td>
		<td>24</td>
		<td>是</td>
	</tr>
	<tr>
		<td>ddd</td>
		<td>64</td>
		<td>否</td>
	</tr>
</table>
<script type="text/javascript">
function details() {
	var ch = document.getElementById("checkid");
	var tds = document.querySelectorAll("#tab td:nth-of-type(3)");
	if (ch.checked) {
		if (!confirm("确认显示详情？")) {
			ch.checked = false;
			return;
		}
		for (var i = 0; i < tds.length; i++) {
			tds[i].innerHTML = tds[i].getAttribute("data-details");
		}
	} else {
		for (var i = 0; i < tds.length; i++) {
			tds[i].setAttribute("data-details",tds[i].innerHTML);
			tds[i].innerHTML = "****";
		}
	}
}
</script>
</body>
</html>

 

您好，我是问答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632