Javascript 按钮函数的HTML更改_Javascript_Jquery_Html

Javascript 按钮函数的HTML更改

javascript jquery html

Javascript 按钮函数的HTML更改,javascript,jquery,html,Javascript,Jquery,Html,嗨，我有下面的代码，通过点击按钮隐藏和显示表格单元格。但问题是我只想button1能够使用这个功能，而不是两者都能使用，有人对如何使用它有什么建议吗？我试图改变按钮类id和所有，但它仍然不工作。任何建议都将不胜感激 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3

嗨，我有下面的代码，通过点击按钮隐藏和显示表格单元格。但问题是我只想button1能够使用这个功能，而不是两者都能使用，有人对如何使用它有什么建议吗？我试图改变按钮类id和所有，但它仍然不工作。任何建议都将不胜感激

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

</head>
<body>

<table>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Hello</td></tr>
    <tr><td>Maniac</td></tr>
    <tr><td>Hello</td></tr>   
</table>


<button>button1</button>
<button>button2</button>

<script>
$('table').find('tr:gt(2)').hide();
$("button").on("click", function() {
$('table').find('tr:gt(2)').toggle();
 });
</script>
</body>
</html>

只需向button1添加一些类/id，并将click事件绑定到该选择器

$'table'。查找'tr:gt2'。隐藏； $.button1.onclick，函数{ $'table'。查找'tr:gt2'。切换； }; 你好你好你好你好疯子你好按钮1

按钮2您可以使用按钮执行以下操作：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

</head>

<body>

    <table>
        <tr>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
        <tr>
            <td>Maniac</td>
        </tr>
        <tr>
            <td>Hello</td>
        </tr>
    </table>


    <button class="button1">button1</button>
    <button class="button2">button2</button>

    <script>
        $('table').find('tr:gt(2)').hide();
        $(".button1").on("click", function () {
            $('table').find('tr:gt(2)').toggle();
        });
    </script>
</body>

</html>

我认为这很简单。将id添加到要对其执行操作的按钮，然后使用该id在其上创建单击事件。下面是一个示例：在html中的按钮标记中添加id=button1

<button id="button1">button1</button>
<button>button2</button>

使用此功能，您将能够仅对按钮1执行操作，而不是同时对两个按钮执行操作

您也可以使用类而不是id。下面是它的用法：

<button class="button1">button1</button>
<button>button2</button>

结论：将类或id添加到html标记中，使其对在上执行不同的功能

做这个，给你。快乐编码

尝试向按钮添加类或ID，并在选择器中将该类/ID用作过滤器。例如，button1和jquery中使用$buttontoggle td

<button class="button1">button1</button>
<button>button2</button>

$('table').find('tr:gt(2)').hide();
$(".button1").on("click", function() {
  $('table').find('tr:gt(2)').toggle();
});