Скрыть часть ячейки в таблице HTML

Question

У меня есть таблица, которая импортировала значения из файла, и в столбце col3 я добавляю раскрывающиеся списки, но хотелось бы, чтобы в столбце col3 присутствовал только раскрывающийся список, а не текст, полученный из файла. Как я могу скрыть текст в ячейке, где я также добавил выпадающий список? Не у каждой ячейки есть значение.

Я знаю, что это должно быть легко, но я просто не могу понять это ... Любая помощь будет отличной. Я попытался добавить видимость или отображение: нет, но все они удаляют выпадающие списки, а текст все еще там

$(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)").append(select);
  });
});

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  table
</h1>
<br/>
<br/>
<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>

Answer 1

Вы так близки к правильному решению. Просто вы .append() выпадаете на тд (то есть добавляете его в конце содержимого), и устанавливаете его как .html(), чтобы добиться цели:

$(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() {
            // it was: $(this).find("td:eq(3)").append(select);
            $(this).find("td:eq(3)").html(select);
        });
});

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;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Filtered CSV File</title>
</head>
  <body>
    <h1>
      table
    </h1>
   <br/>
   
   <br/>
   <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>
 
  </body>
</html>