技术求助：如何用CSS与JQuery实现点击修改Div内容（附表格交互代码）

嘿，我来帮你搞定点击修改Div内容的需求！先梳理下你现有的代码，然后咱们一步步调整实现功能：

你的现有代码 #

<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>内容1</td>
            <td>内容2</td>
            <td><div class="show">点击操作</div></td>
        </tr>
        <tr>
            <td>内容3</td>
            <td>内容4</td>
            <td><div class="show">点击操作</div></td>
        </tr>
    </tbody>
</table>
</body>
</html>

实现点击修改Div内容的方案 #

我假设你想点击每行最后一个单元格的.show元素，修改页面中某个目标Div的内容（如果是修改行内的Div，后面也会给出调整方法），具体实现如下：

修改后的完整代码 #

<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>内容1</td>
            <td>内容2</td>
            <!-- 用data属性存储点击后要显示的内容，灵活易维护 -->
            <td><div class="show" data-content="第一行触发的新内容">点击修改Div</div></td>
        </tr>
        <tr>
            <td>内容3</td>
            <td>内容4</td>
            <td><div class="show" data-content="第二行触发的新内容">点击修改Div</div></td>
        </tr>
    </tbody>
</table>

<!-- 要修改的目标Div，给个唯一ID方便定位 -->
<div id="targetDiv">初始默认内容</div>

<!-- 引入jQuery，确保代码能正常运行 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 给所有.show元素绑定点击事件
    $('.show').on('click', function() {
        // 获取当前点击元素预设的新内容
        const newContent = $(this).data('content');
        // 修改目标Div的文本内容
        $('#targetDiv').text(newContent);
        
        // 如果需要插入带格式的HTML内容，改用html()方法：
        // $('#targetDiv').html('<span style="color:blue">' + newContent + '</span>');
    });
});
</script>
</body>
</html>

关键部分解释 #

• 给.show元素加data-content属性：把要替换的内容存在元素上，不用在JS里硬编码，后续修改更方便
• $(document).ready()：确保页面所有元素加载完成后再绑定事件，避免找不到元素的问题
• 点击事件逻辑：先获取预设内容，再通过ID定位目标Div，用text()或html()方法修改内容

如果你的需求是修改点击行内的.show-child元素，只需要把JS里的$('#targetDiv')改成$(this).closest('tr').find('.show-child')，再调整对应的内容即可。

内容的提问来源于stack exchange，提问作者Kunal Mukherjee