Hide a part of the cell in HTML table

Question

I have a table that has imported values from a file and at the col3 I append dropdown lists, but I would like that at the col3 there is only dropdown list and not text given from the file. How can I hide the text in a cell where I also appended a dropdown list?Not each cell has a value.

I know it is supposed to be easy but I just can't figure it out... Any help would be great. I tried adding visibility or display: none , but they all remove the dropdown lists and the text is still there

$(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

You're so near the right solution. It's just that you .append() the dropdown to the td (i.e. add it at the end of the content), and setting it as .html() would do the trick:

$(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>