获取点击元素的文本信息复制到剪切板监听鼠标悬浮

2022/1/17 6:04:36

编程Tag： function css 剪切板鼠标 td background color ret 复制到

本文主要是介绍获取点击元素的文本信息复制到剪切板监听鼠标悬浮，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

监听鼠标悬浮

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"> -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<body style="border: 1px solid red;margin: 4px;">
  <table class="table table-bordered">
    <caption></caption>
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ā</td>
        <td>á</td>
        <td>ǎ</td>
        <td>à</td>
      </tr>
      <tr>
        <td>ō</td>
        <td>ó</td>
        <td>ǒ</td>
        <td>ò</td>
      </tr>
      <tr>
        <td>ē</td>
        <td>é</td>
        <td>ě</td>
        <td>è</td>
      </tr>
      <tr>
        <td>ī</td>
        <td>í</td>
        <td>ǐ</td>
        <td>ì</td>
      </tr>
      <tr>
        <td>ū</td>
        <td>ú</td>
        <td>ǔ</td>
        <td>ù</td>
      </tr>
      <tr>
        <td>ǖ</td>
        <td>ǘ</td>
        <td>ǚ</td>
        <td>ǜ</td>
      </tr>
      <tr>
        <td>ṉ</td>
        <td>ń</td>
        <td>ň</td>
        <td>ǹ</td>
      </tr>
      <tr>
        <td>ḡ</td>
        <td>ǵ</td>
        <td>ǧ</td>
        <td>ġ</td>
      </tr>
      <tr>
        <td>ṙ</td>
        <td>ŕ</td>
        <td>ř</td>
        <td>ṟ</td>
      </tr>
    </tbody>
  </table>
</body>
<script>
  $("td").hover(function () {
    $("td").css("background-color", "white");
    $(this).click(function () {
      var ret = $(this).text();
      navigator.clipboard.writeText(ret);
      $(this).css("background-color", "green");
    });

  });
</script>

</html>

这篇关于获取点击元素的文本信息复制到剪切板监听鼠标悬浮的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

获取点击元素的文本信息 复制到剪切板 监听鼠标悬浮

相关编程文章

获取点击元素的文本信息复制到剪切板监听鼠标悬浮