如何让我的 JQuery 脚本在 HTML - Table 中工作

Question

我是编程新手！我有一些创建弹出框的 JQuery 脚本。单击我 HTML 中的图像时，我希望它运行。我已将脚本链接到 html 文件的顶部，文件存储在我的根目录中，我现在只需要告诉 table 读取 JQuery 对吗？

我的JQuery:

<!DOCTYPE html>
<head>
    <title>Examples of using jQuery Alerts</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="jquery.alerts.js" type="text/javascript"></script>
    <link href="jquery.alerts.css" rel="stylesheet" type="text/css"  media="screen" />

    <!-- Example script -->
    <script type="text/javascript">
    $(document).ready( function() {
        $("#basic_button").click( function() {
            jAlert('Example of a basic alert box in jquery', 'jquery basic alert  box');
        });
    });
    </script>
</head>
<body>
    <p>
        <input id="basic_button" type="button" value="Show Basic Alert" />
    </p>
</body>
</html>

我的 HTML table 代码中包含图像：

<tr> 
    <td><img alt="TE37" src="images/showroom/g25prism.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25dbk.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25premium.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g12.jpg" title=""></td>
</tr>

我该怎么做？谢谢:)

Answer 1

在 html 文件底部将 link 添加到 jQuery。如果实施方式正确，页面加载速度更快，脚本和依赖项执行也不会出现问题。

  <!-- jQuery (necessary for Bootstrap's JavaScript plug…-->
  <script src="static/js/jquery.js"></script>
  <script src="static/js/bootstrap.min.js"></script>

  </body>
</html>

Answer 2

我建议您将 Javascript 代码放在页面底部。

然后，请注意 #basic_button 是 <input id="basic_button" /> 的引用。您需要将此引用替换为您的 table 的一个引用。在你的例子中 td img 很好，但我建议你在你的 table 中放一个 class 并使用它。

例如，它应该有效：

<!DOCTYPE html>
<head>
    <title>Examples of using jQuery Alerts</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="jquery.alerts.js" type="text/javascript"></script>
    <link href="jquery.alerts.css" rel="stylesheet" type="text/css"  media="screen" />

    <!-- Example script -->
</head>
<body>
  <table class="some-class">
    <tr> 
      <td><img alt="TE37" src="images/showroom/g25prism.jpg" title=""></td>
      <td><img alt="TE37" src="images/showroom/g25dbk.jpg" title=""></td>
      <td><img alt="TE37" src="images/showroom/g25.jpg" title=""></td>
      <td><img alt="TE37" src="images/showroom/g25premium.jpg" title=""></td>
      <td><img alt="TE37" src="images/showroom/g12.jpg" title=""></td>
    </tr>
  </table>

    <script type="text/javascript">
    $(document).ready( function() {
        $(".some-class td img").click( function() {
            jAlert('Example of a basic alert box in jquery', 'jquery basic alert  box');
        });
    });
    </script>
</body>
</html>

Answer 3

您可以试试下面的脚本，它应该可以满足您的要求。我包含了一个标准警报，因为我不确定 JAlert() 是什么。相反，我还包含了一个常规的 alert()。

为了解释脚本的作用，在页面加载时 $(function()){} 我们告诉页面在 "Image element"。为了告诉脚本我们想要什么图像，我们添加了一个任意的新的 class 到 called "clickable" （但是你可以随便叫它）我们使用这个 class 来找到我们想要的元素将事件附加到。

希望这对您有所帮助。

<!DOCTYPE html>
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            <script type="text/javascript">
                $(function() {
                    $(".clickable").on('click',function(){
                        jAlert('Example of a basic alert box in jquery', 'jquery basic alert  box'); // Don't know what JAlert is might require you to include some extra library
                        alert("I clicked on "+$(this).attr("src"));
                    });
                });
            </script>
        </head>
        <body>
            <tr>
                <td><img class="clickable" alt="TE37" src="images/showroom/g25prism.jpg" title=""></td>
                <td><img class="clickable" alt="TE37" src="images/showroom/g25dbk.jpg" title=""></td>
                <td><img class="clickable" alt="TE37" src="images/showroom/g25.jpg" title=""></td>
                <td><img class="clickable" alt="TE37" src="images/showroom/g25premium.jpg" title=""></td>
                <td><img class="clickable" alt="TE37" src="images/showroom/g12.jpg" title=""></td>
            </tr>
        </body>
    </html>

Answer 4

$(document).ready( function() {
  $("td>img").on("click", function() {
    alert('Example of a basic alert box in jquery', 'jquery basic alert  box');
  });
});

<!DOCTYPE html>
<head>
    <title>Examples of using jQuery Alerts</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
</head>
<body>
    <p>
        <input id="basic_button" type="button" value="I am useless" />
    </p>
  <table>
  <tr> 
    <td><img alt="TE37" src="images/showroom/g25prism.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25dbk.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g25premium.jpg" title=""></td>
    <td><img alt="TE37" src="images/showroom/g12.jpg" title=""></td>
</tr>
    </table>
</body>
</html>

您不能将事件设置到您的按钮，而是在 table 单元格或您单元格中的图像上

当您单击单元格包含的图像时，下面的示例有效：

 $(document).ready( function() {
  $("td>img").on("click", function() {
    jAlert('Example of a basic alert box in jquery', 'jquery basic alert  box');
  });
});

如何让我的 JQuery 脚本在 HTML - Table 中工作

How do I get my JQuery script to work in HTML - Table

html

jquery

hyperlink