Javascript 设置一个_Javascript_Jquery_Html_Css

Javascript 设置一个

javascript jquery html css

Javascript 设置一个,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试了又试着找到这样的问题，所以我没有再问。如果是的话，我很抱歉。我正在为大学制作一个网站，我有一个数据表。由于该项目是基于我们对php和mysql的学习，我被提示为它实现一些javascript功能。不管怎么说，我计划使用javascript，当我将鼠标悬停在一行数据上时，它的大小会增加动画效果，但我担心我太笨了，不知道怎么做这是我的代码*PS我也希望鼠标离开它时，它会收缩回原来的大小。提前谢谢 HTML JS 您可以轻松地使用css转换来实现这一点 tr{transition:all.2

我试了又试着找到这样的问题，所以我没有再问。如果是的话，我很抱歉。我正在为大学制作一个网站，我有一个数据表。由于该项目是基于我们对php和mysql的学习，我被提示为它实现一些javascript功能。不管怎么说，我计划使用javascript，当我将鼠标悬停在一行数据上时，它的大小会增加动画效果，但我担心我太笨了，不知道怎么做

这是我的代码*PS我也希望鼠标离开它时，它会收缩回原来的大小。提前谢谢

HTML

您可以轻松地使用css转换来实现这一点

tr{transition:all.2s ease in out；} tr:hover{transform:scale1.1；} 一二三

要使用JavaScript实现这一点，首先必须在行上使用类，而不是ID。这是因为行是使用循环创建的。因此，将为所有行定义相同的id。。。这是不好的。在HTML文档中，id必须是唯一的

然后，您必须使用选择这些行，这将返回元素的集合。。。不只是一个。好可能只有一个，但它将在一个数组中

为了将一些事件绑定到行，必须迭代集合数组并向其中添加事件侦听器。就这样结束了

最后，使用属性完成缩放

这是您仅有两行的代码。。。我模拟了数据库中的PHP结果

祝你好运解释这一切。。。单击链接并阅读文档。这是学习东西的最好方法

var btn1=document.getElementById'btn1'； var btn2=document.getElementById'btn2'； var btn3=document.getElementById'btn3'； var row=document.getElementsByClassName'row'；对于var i=0；i<行长；i++{ 行[i]。addEventListenermouseenter，函数{ this.style.transform=scale1.2； }; 第[i]行。addEventListenermouseleave，函数{ this.style.transform=scale1； }; } html，正文{ 保证金：0；填充：0；字体系列：Roboto； } .包装纸{ 宽度：600px；保证金：0自动； } 钮扣{ 位置：绝对位置；顶部：600px；左：50%；转化：translateX-50%； } .btn{ 高度：100px；宽度：200px；边界半径：10px；边界：无；大纲：无；颜色：fff；文本转换：大写；字体大小：300；字体大小：1.5rem；光标：指针；框阴影：嵌入0px 0px 50px rgba0,0,0,0.0；盒影：1px3px6pxRGBA0,0,0.7； } .btn：活动{ 高度：100px；宽度：200px；边界半径：10px；边界：无；大纲：无；颜色：fff；文本转换：大写；字体大小：300；字体大小：1.5rem；光标：指针；盒影：1px3px6pxRGBA0,0,0.7；框阴影：插入0px 0px 30px rgba0,0,0,0.7； } btn1{ 背景色：红色； } btn2{ 背景颜色：蓝色； } btn3{ 背景颜色：绿色； } 身体{ 背景图片：url../resources/img/football.jpg；身高：100%；背景尺寸：封面； } h1{ 保证金：0；填充：0； } 收割台h1{ 字号：4rem；文本对齐：居中；文本转换：大写；边缘顶部：20px；颜色：fff； -webkit文本笔划：1px黑色； } 球员玩家ID 球员姓名球员年龄球员团队 32 傀儡 472 坏蛋 79 哈梅斯 124 冷血

谢谢，我知道这是可能的，这是一个很好的解决方案。尽管我希望通过javascript实现，因为正如我所说的，我们在实现一些javascript功能时得到了额外的分数。

<?php
  require_once("connect.php");

  $query = "SELECT * FROM player";
  $stmt = $con->prepare($query);
  $stmt->execute();
  $results = $stmt->fetchAll();
  $stmt->closeCursor();
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Players</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  </head>
  <body>
      <header>
        <h1>Players</h1>
      </header>
      <div class="wrapper">
        <table border="0" cellspacing="30px" align="center">
          <tr>
            <th>Player ID</th>
            <th>Player Name</th>
            <th>Player Age</th>
            <th>Player Team</th>
          </tr>
          <?php foreach ($results as $r): ?>
          <tr id="row">
            <td><?php echo $r['ID']; ?></td>
            <td><?php echo $r['Player Name']; ?></td>
            <td><?php echo $r['Player Age']; ?></td>
            <td><?php echo $r['Player Team']; ?></td>
          </tr>
          <?php endforeach; ?>
        </table>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="resources/js/main.js"></script>
  </body>
</html>

html, body {
  margin: 0;
  padding: 0;
  font-family: Roboto;
}

.wrapper {
  width: 600px;
  margin: 0 auto;
}

#buttons {
  position: absolute;
  top: 600px;
  left: 50%;
  transform: translateX(-50%);
}

.btn {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.0);
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.7);
}

.btn:active {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  border: none;
  outline: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.7);
}

#btn1 {
  background-color: red;
}

#btn2 {
  background-color: blue;
}

#btn3 {
  background-color: green;
}

body {
  background-image: url("../resources/img/football.jpg");
  height: 100%;
  background-size: cover;
}

h1 {
  margin: 0;
  padding: 0;
}

header h1 {
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  margin-top: 20px;
  color: #fff;
  -webkit-text-stroke: 1px black;
}

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');

var row = document.getElementById('row');

row.onmouseenter = function() {
  row.style.scale = "2";
}

row.onmouseleave = function() {
  row.style.scale = "1";
}