javascript - 检查用户信息时如何显示表格?
问题描述
我想写一个代码,如果你按下按钮并且用户名和密码是正确的。然后它会向您显示一个包含照片和 Instagram 链接的表格。
当在脚本标记中的函数内部使用table标记时,函数会中断并且 html 本身没有函数。那么当按钮被按下时我应该把我的桌子放在哪里?
这是我的代码:
<html>
<head>
<title>balalar</title>
<script type="text/javascript">
function check(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username == "user1" && password == "1234"){
alert("hello user")
<!--want to put the table here. but it breaks the function-->
}
else
{
alert("chek username and password");
}
}
</script>
</head>
<body>
<form align="center">
username:<input type="text" name="username" id="username" /><br>
</br>
password:<input type="password" name="password" id="password"/><br>
</br>
<input type="button" value="login" id="login" onclick="return
check()"/>
</form>
</body>
</html>
这是我的桌子:
<!DOCTYPE html>
<html>
<link rel=stylesheets; href="css.css">
<head>
<title>BALALAR</title>
<style>
table, th, td {
border:5px solid black;
border-collapse: collapse;
}
th, td {
padding: 30px;
}
tr:nth-child(even) {
background: pink;
}
th {
background: gray;
}
</style>
</head>
<body>
<table align="center">
<caption style="color: #ff99ac"> <h1>[BALALAR]</h1> </caption>
<tr> <!--heading------------------------------------------------------------>
<th>photo</th>
<th>name</th>
<th>age</th>
<th>info</th>
<th>instagram</th>
</tr>
<tr> <!--lucifer------------------------------------------------------------>
<td> <center> <img src="https://scontent-ams3-1.cdninstagram.com/vp/17d60601e17a27d3a0196470f00c55a4/5CF8DA8C/t51.2885-15/e35/50850072_2165205533518446_3117212119304625148_n.jpg?_nc_ht=scontent-ams3-1.cdninstagram.com" height="200px" width="200px"> </center> </td>
<td> <center>lucifersexdoll</center> </td>
<td> <center>18</center> </td>
<td> <center>instagram star and tiktoker</center> </td>
<td> <center> <a href="https://www.instagram.com/lucifersexdoll/?hl=en"> <img src="https://www.edigitalagency.com.au/wp-content/uploads/new-instagram-logo-png-transparent.png" height="50px" width="50px"> </a> </center> </td>
</tr>
<tr> <!--belle delphine----------------------------------------------------->
<td> <center> <img src="https://scontent-dfw5-1.cdninstagram.com/vp/6331b02f48e920975e98434c595fd4ee/5CE47C32/t51.2885-15/e35/41760483_210825032975228_2673466538809180596_n.jpg?_nc_ht=scontent-dfw5-1.cdninstagram.com" height="200px" width="170px"> </center> </td>
<td> <center>belle delphine</center> </td>
<td> <center>19</center></td>
<td> <center>instagram star and snapchat thot</center></td>
<td> <center> <a href="https://www.instagram.com/belle.delphine/?hl=en"> <img src="https://www.edigitalagency.com.au/wp-content/uploads/new-instagram-logo-png-transparent.png" height="50px" width="50px"> </a> </center> </td>
</tr>
<tr> <!--Georgia Twinn------------------------------------------------------>
<td> <center> <img src="https://scontent-frx5-1.cdninstagram.com/vp/b4cdaabe45fd41c4d36e18c074a0cb71/5CEFBA3C/t51.2885-15/e35/43986219_288982548424250_1512646608107907870_n.jpg?_nc_ht=scontent-frx5-1.cdninstagram.com" style="transform: rotate(-90deg);" height="200px" width="200" > </center> </td>
<td> <center>Georgia Twinn</center> </td>
<td> <center>15</center> </td>
<td> <center> instagram star and youtuber</center> </td>
<td> <center> <a href="https://www.instagram.com/georgialeetwinn/"> <img src="https://www.edigitalagency.com.au/wp-content/uploads/new-instagram-logo-png-transparent.png" height="50px" width="50px" > </a> </center> </td>
</tr>
<tr> <!--lilsaggester------------------------------------------------------->
<td> <center> <img src="https://scontent-ams3-1.cdninstagram.com/vp/b7b351d27e76a70aed0dc97ca2946b31/5CF7E289/t51.2885-15/e35/44478694_259861178046212_7053862547100372241_n.jpg?_nc_ht=scontent-ams3-1.cdninstagram.com" height="200px" width="200px" > </center> </td>
<td> <center>hannah fabel</center> </td>
<td> <center>16</center> </td>
<td> <center>tiktoker</center> </td>
<td> <center> <a href="https://www.instagram.com/aestheticallyhannah/"> <img src="https://www.edigitalagency.com.au/wp-content/uploads/new-instagram-logo-png-transparent.png" height="50px" width="50px" > </a> </center> </td>
</tr>
<tr> <!--cyxll-------------------------------------------------------------->
<td> <center> <img src="https://scontent-ams3-1.cdninstagram.com/vp/fe0da5e3353e102fd30a771e7f18d793/5CEA7C9B/t51.2885-15/e35/50510784_321000775215940_7823002975742791621_n.jpg?_nc_ht=scontent-ams3-1.cdninstagram.com" height="200px" width="250px"> </center> </td>
<td> <center>cyxll</center> </td>
<td> <center>unknown</center> </td>
<td> <center>instagram user</center> </td>
<td> <center> <a href="https://www.instagram.com/cyxll/?hl=en"> <img src="https://www.edigitalagency.com.au/wp-content/uploads/new-instagram-logo-png-transparent.png" height="50px" width="50px"> </a> </center> </td>
</tr>
<tr> <!--gal gadot---------------------------------------------------------->
<td> <center><img src="https://scontent-ams3-1.cdninstagram.com/vp/85ba393e3d05f6047fea8ac9ee61edd4/5D250597/t51.2885-15/e35/40265259_229384887926581_2920908417464813508_n.jpg?_nc_ht=scontent-ams3-1.cdninstagram.com" height="200px" width="200px"> </center> </td>
<td> <center>gal gadot</center> </td>
<td> <center>33</center> </td>
<td> <center>actress</center> </td>
<td> <center> <a href="https://www.instagram.com/gal_gadot/?hl=en"> <img src="https://www.edigitalagency.com.au/wp-content/uploads/new-instagram-logo-png-transparent.png" height="50px" width="50px"> </a></center> </td>
</tr>
</table>
</body>
</html>
以后想为不同的用户放不同的表。
解决方案
您可以将表格留在 HTML 正文中...并制作#tableID {display: none;}
在 JS 中:
function check(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username == "user1" && password == "1234"){
alert("hello user")
document.getElementById('tableID').style.display = 'block';
}
else {alert("chek username and password");}
}
但是即使有太具体的代码,当你不得不将你的HTML放在JS中时,你必须对所有特殊字符进行转义(搜索> JavaScript字符串转义)
主要是符号\
...有时是[]
或HTML-code
前任。,
<td> <center> <img src="https://scontent-ams3-1.cdninstagram.com/vp/17d60601e17a27d3a0196470f00c55a4/5CF8DA8C/t51.2885-15/e35/50850072_2165205533518446_3117212119304625148_n.jpg?_nc_ht=scontent-ams3-1.cdninstagram.com" height="200px" width="200px"> </center> </td>
必须替换为:
<td> <center> <img src="https:\/\/scontent-ams3-1.cdninstagram.com\/vp\/17d60601e17a27d3a0196470f00c55a4\/5CF8DA8C\/t51.2885-15\/e35\/50850072_2165205533518446_3117212119304625148_n.jpg?_nc_ht=scontent-ams3-1.cdninstagram.com" height=\'200px\' width=\'200px\'> <\/center> <\/td>
你可以在这里尝试这样的操作 - - https://liveweave.com/ 它有舒适的颜色,如果有错误,它会告诉你。
Ps'你能解释一下吗?':
<table id="AnyName"> ... </table>
每个 HTML 元素都可以有一个唯一的 ID,可以从 JavaScript 定位。此外,如果您在 CSS 中选择带有.class {}
... ID 的类,则可以使用#id {}
. 所以,我们用#AnyName {display: none}
点击后...如果用户名和密码匹配 - 我们通过 ID 获取元素并使其可见:
document.getElementById('AnyName').style.display = 'block';
它说“使用此 ID 获取元素,并更改其样式”
可能有.style.border = '1px solid red';
或.style.backgroundColor = 'red';
但我们需要使其可见......所以,display = 'block';
推荐阅读
- java - 改造上传 Base64 字符串作为字段 (8MB) 需要 4 分钟
- ruby-on-rails - PostCSS 未加载 SCSS 模块依赖项
- c++ - 为什么按空格字符拆分文件缓冲区不起作用?
- angular - Angular 6 反应形式,同步跨字段验证
- spring-boot - 审计时插入空值
- r - 当 R 中的 MyData$Columnx == MyData[,x] 时,为什么 MyData[,x] 的行为方式与 MyData$Columnx 不同?
- tensorflow - 保存模型以供服务,但“ValueError:必须同时提供标签和日志”。尝试导出模型时
- rxjs - rxjs 将 http 数据与 websocket 更新合并
- java - 仅当非空或零时,Java bean 才验证范围
- javascript - 在 es6 模板字符串中传递对象