Javascript 单击鼠标更改div的内容_Javascript_Jquery_Html_Css

Javascript 单击鼠标更改div的内容

javascript jquery html css

Javascript 单击鼠标更改div的内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,CSS和Jquery 我创建了一个表，每行有三个单元格。行的最后一个单元格的内容将在相应行的鼠标悬停处可见。这部分我设法做到了我编写的HTML、CSS和Jquery如下： <html> <style> tbody tr td div.show{ display:none; cursor:pointer; } .show-child{ display:none; cursor:poin

CSS和Jquery

我创建了一个表，每行有三个单元格。行的最后一个单元格的内容将在相应行的鼠标悬停处可见。这部分我设法做到了

我编写的HTML、CSS和Jquery如下：

<html>
<style>
    tbody tr td div.show{
        display:none;
        cursor:pointer;
    }
    .show-child{
        display:none;
        cursor:pointer;
    }

    tbody tr:hover td div.show{
        display:block;
    }

</style>
<body>
    <table border="1">
        <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td><div class="show">Edit</div> <div class="show-child">Save | Cancel</div></td>
            </tr>
            <tr>
                <td>Allan</td>
                <td>Doe</td>
                <td><div class="show">Edit</div><div class="show-child">Save | Cancel</div></td>
            </tr>
            <tr>
                <td>Richi</td>
                <td>Doe</td>
                <td><div class="show">Edit</div><div class="show-child">Save | Cancel</div></td>
            </tr>
        </tbody>
    </table>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $('.show').on('click',function(){//alert('aaaa');
            if($('.show').css('display')=='block'){//alert('aaaa');
                $('.show').css('display','none');
                $('.show-child').css('display','block');
            }
        });
    </script>
</body>
</html>


tbody tr td部门秀{
显示：无；
光标：指针；
}
.给孩子看{
显示：无；
光标：指针；
}
tbody tr：悬停td节目{
显示：块；
}
约翰
雌鹿
编辑保存|取消
艾伦
雌鹿
编辑保存|取消
里基
雌鹿
编辑保存|取消
$（'.show'）。在（'click'，function（）{//alert（'aaaa'）；
如果（$（'.show'）.css（'display'）=='block'）{//alert（'aaaa'）；
$（'.show'）.css（'display'，'none'）；
$（'.show child'）.css（'display'，'block'）；
}
});

在最后一个单元格中，当我单击“编辑”时，它将显示保存和取消链接。但是当我点击编辑按钮时，所有的行都在改变。我只想更改相应单元格的内容

我还想在行的第一个单元格中显示一个输入类型文本来代替名称

请帮帮我。

当你使用时，在它里面，你有变量

这个

。在

这个

变量中，单击元素。因此，您可以使用

这个

，而不是使用CSS类选择器

$（'.show'）。在（'click'，function（）上{
如果（$（this）.is（':visible'））{
var td=$（this.parent（'td'）；
$（this.hide（）；
$（'.show child'，td.show（）；
}
});
tbody tr td div.show{
显示：无；
光标：指针；
}
.给孩子看{
显示：无；
光标：指针；
}
tbody tr：悬停td节目{
显示：块；
}

约翰
雌鹿
编辑保存|取消
艾伦
雌鹿
编辑保存|取消
里基
雌鹿
编辑保存|取消

$（'.show'）。在（'click'，function（）{//alert（'aaaa'）；
让parentElem=$（this）.closest（'tr'）
$（parentElem）.find（'.s_f_name'）.css（'display'，'none'））
$（parentElem）.find（'.s_l_name'）.css（'display'，'none'））
$（parentElem）.find（'.t\u f\u name'）.css（'display'，'block'））
$（parentElem）.find（'.t_l_name'）.css（'display'，'block'））
如果（$（this）.is（':visible'））{
$（this.hide（）；
$（parentElem）.find（'.show-child'）.show（）
}     
});
tbody tr td div.show{
显示：无；
光标：指针；
}
.给孩子看{
显示：无；
光标：指针；
}
tbody tr：悬停td节目{
显示：块；
}
.t_f_名称{
显示：无
}
.t_l_名称{
显示：无
}

约翰
雌鹿
编辑保存|取消
艾伦
雌鹿
编辑保存|取消
里基
雌鹿
编辑保存|取消
This:$（'.show child'）.css（'display'，'block'）将显示每个孩子。它完全按照您的要求执行。我只想在相应的行上显示子对象，而不是在每一行上显示子对象，然后您需要将其更改为上下文查找<代码>单击处理程序中的此
将是单击的显示。您可以使用$（'.show child'，this）
在其中找到show child$（选择器）
实际上与$（选择器，文档）
相同，第二个参数是查找其中元素的父参数，您可以提供它来覆盖默认值。您能给我一个示例吗。。。请