Answers for "html web table template"

2

table template html

<body>
  <table>
    <tr>
      <th>İsim</th>
      <th>Soyisim</th>
      <th>E-posta</th>
      <th>Durum</th>
    </tr>
    <tr>
      <td>Devrim</td>
      <td>Demir</td>
      <td>[email protected]</td>
      <td>
        <button class="butonlar">KAPALI</button>
      </td>
    </tr>
    <tr>
      <td>Enes</td>
      <td>Pehlivan</td>
      <td>[email protected]</td>
      <td>
        <button class="butonlar">KAPALI</button>
      </td>
    </tr>
    <tr>
      <td>Osman</td>
      <td>Gültekin</td>
      <td>[email protected]</td>
      <td>
        <button class="butonlar">KAPALI</button>
      </td>
    </tr>
    <tr>
      <td>Mansur</td>
      <td>Lavaş</td>
      <td>[email protected]</td>
      <td>
        <button class="butonlar">KAPALI</button>
      </td>
    </tr>
  </table>
  
<script src="jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</body>




//css
*{
  font-family:sans-serif;
  background:#f3f2ef;
}
table{
  margin:200px auto;
  text-align:center;
  background:#fff;
  border:4px solid dodgerblue;
  padding:2px;
}
th, td{
  border:2px solid dodgerblue;
  background:#fff;
  cursor:default;
  padding:3px;
}
.butonlar{
  cursor:pointer;
  background:red;
  color:white;
  text-align:center;
  outline:none;
  border:none;
  padding:10px 20px;
  font-weight:bolder;
  border-radius:4px;
}



////script
$(".butonlar").click(function(){
  $(this).html("AKTİF");
  $(this).css({
    "background-color":"green"
  });
})
Posted by: Guest on July-30-2021

Browse Popular Code Answers by Language