如何在HTML表格单元格保留下拉列表并隐藏原有导入文本？

我来帮你搞定这个问题！你之前遇到的问题核心在于：直接给<td>设置visibility:hidden或display:none会把单元格里的所有内容（包括你刚追加的下拉框）一起隐藏，而不是只针对原有文本。下面给你两种可行的解决方案：

方法一：清空原有文本后添加下拉框（最简单直接） #

如果不需要保留原有文本，直接清空<td>的内容再追加下拉框就可以了，这样单元格里只会显示下拉列表：

修改你的jQuery代码中追加下拉框的部分：

$("tr").each(function() {
    // 先清空td原有内容，再添加下拉框
    $(this).find("td:eq(3)").empty().append(select);
});

方法二：保留原有文本但隐藏（适合需要后续复用原有内容的场景） #

如果需要保留原有文本在DOM中（比如后续要读取或修改），可以把原有文本节点包裹到一个隐藏的<span>里，只显示下拉框：

修改后的jQuery代码：

$(function() {
    var firstDDM = ['aaa', 'bbb', 'ccc', 'ddd'];
    var firstshortcut = ['a', 'b', 'c', 'd'];
    var option = "", select = "";
    for (var i = 0; i < firstDDM.length; i++) {
        option += '<option value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
    }
    select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
    
    $("tr").each(function() {
        var $td = $(this).find("td:eq(3)");
        // 筛选出td里的文本节点，包裹到隐藏的span中
        $td.contents().filter(function() {
            return this.nodeType === 3; // 只匹配文本节点
        }).wrap('<span style="display:none;"></span>');
        // 追加下拉框
        $td.append(select);
    });
});

为什么你之前的方法不行？ #

visibility:hidden和display:none是作用于整个元素的，如果你直接给<td>设置这些属性，会把单元格内的所有元素（包括你新加的下拉框）一起隐藏。我们需要精准地只对原有文本节点进行隐藏操作，而不是整个单元格。

完整示例代码 #

下面是修改后的完整代码（以方法一为例）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> table </h1>
<br/>
<br/>
<style>
table {
    border-collapse: collapse;
    border: 1px black solid;
    font: 12px sans-serif;
    width: 100%;
    table-layout: auto;
}
td {
    border: 1px black solid;
    text-align: left;
    padding: 2px;
}
thead:hover {
    text-decoration: none !important;
}
thead tr:first-child {
    color: white;
    text-align: center;
    background-color: #5bc0de;
    padding: 10px;
}
tr:nth-child(even) {
    background-color: #f2f2f2
}
tr:hover {
    background-color: #5bc0de;
}
button {
    display: inline;
    padding: 50px;
}
input button {
    display: inline;
}
.dropbtn {
    background-color: blue;
}
.table-responsive {
    overflow-y: auto;
    height: 800px;
}
.table-responsive table {
    border-collapse: collapse;
    width: 100%;
}
.table-responsive thead th {
    position: sticky;
    top: 0;
    background-color: #5bc0de;
    padding: 2px;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}
.myButtons {
    display: inline;
    padding: 20px;
}
</style>
<div class="table-responsive">
    <table class="dataframe my_class" id="my_id">
        <thead>
            <tr style="text-align:right;">
                <th> </th>
                <th>col1</th>
                <th>col2</th>
                <th>col3</th>
                <th>col4</th>
                <th>col5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>row1</td>
                <td>row1</td>
                <td>row1</td>
                <td>Remove this text</td>
                <td>row1</td>
            </tr>
            <tr>
                <th>2</th>
                <td>row2</td>
                <td>row2</td>
                <td>row2</td>
                <td></td>
                <td>row2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>row3</td>
                <td>row3</td>
                <td>row3</td>
                <td>Remove this text</td>
                <td>row3</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
$(function() {
    var firstDDM = ['aaa', 'bbb', 'ccc', 'ddd'];
    var firstshortcut = ['a', 'b', 'c', 'd'];
    var option = "", select = "";
    for (var i = 0; i < firstDDM.length; i++) {
        option += '<option value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
    }
    select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
    $("tr").each(function() {
        $(this).find("td:eq(3)").empty().append(select);
    });
});
</script>

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