setting a value in the dropdowns in table based on imported values [javascript, jquery]

Question

I have a table that is filled dynamically with a csv file. I created a table that inside itself has dropdowns in some columns.

What I want to do now is to check if a value exists in the cell where the dropdown is supposed to be, if so to check if it exists in the dropdownlist if yes then set this as selected in dropdown list otherwise selected is at default value and the cell gets red margine around.

Here is a jsFiddle with an example as how my code currently looks like:

https://jsfiddle.net/r236uy5k/

EDIT : I corrected my jsfiddle: https://jsfiddle.net/kcau7jhd/

$(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);
        });
});

$(function(){
 var secondDDM = ['Default','AAA','BBB','B1','C'];
  var secondshortcut = ['Default','a','b','b1','c'];
  var option = "",
    select = "";
  for(var i=0; i<secondDDM.length;i++){
   option += '<option value="'+ secondshortcut[i] + '">' + secondDDM[i] + '</option>';
  }
  select = '<select class="secondDDM" type="secondDDM">' + option + '</select>';
  
  $("tr").each(function() {
            $(this).find("td:eq(5)").append(select);
        });
});




$("#addRow").click(function(){
        $("#my_id").each(function(){
            var tds='<tr>';
            jQuery.each($('tr:last th', this), function(){
                tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>';
            });
            jQuery.each($('tr:last td', this), function(){
                
                if($('select',this).length){
                    tds+= '<td>' + $(this).html() + '</td>';
                }else{
                    tds+= '<td></td>';
                }
            });
            tds+= '</tr>';
            $('tbody',this).append(tds);
            $('#my_id tbody tr:last').attr("contentEditable", true);
        });
        
    });

 //for the columns that need to be imported with dropdowns create editable option - temporarlly 
    $(function() {
    $("tr").each(function() {
        $(this).find("td:eq(3), td:eq(4),td:eq(5)").attr("contentEditable", true);
        });
    });
    
    //Find and remove selected table rows
    $('#delete-row').click(function(){
        var r = confirm('Are you sure you want to delete them all?');
        $("tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                if(r == true){
                    $(this).parents("tr").remove();
                }else{
                    return false;
                }
                
            }
        });
    });

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>
      Filtered CSV FIle
    </h1>
   <br/>
   <br/>
   <div class="myButtons">
     <input type="button" value="Add new row" class="btn btn-info" id="addRow">
     <input  type="button" value="Delete rows" id="delete-row" class="btn btn-info">
   </div>
   <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>
           <th>col6</th>
           <th>col7</th>
           <th>col8</th>
         </tr>
       </thead>
         
       <tbody>
         <tr>
           <th>1</th>
           <td>row1</td>
           <td>row1</td>
           <td>row1</td>
           <td></td>
           <td>row1</td>
           <td>B1</td>
           <td>row1</td>
           <td>row1</td>
         </tr>
         <tr>
           <th>2</th>
           <td>row2</td>
           <td>row2</td>
           <td>row2</td>
           <td></td>
           <td>row2</td>
           <td>AAA</td>
           <td>row2</td>
           <td>row2</td>
         </tr>
         <tr>
           <th>3</th>
           <td>row3</td>
           <td>row3</td>
           <td>row3</td>
           <td></td>
           <td>row3</td>
           <td>C</td>
           <td>row3</td>
           <td>row3</td>
         </tr>
       </tbody>
     </table>
   </div>
 
  </body>
</html>

I have a couple of questions. In your fiddle example, you have col4 and col6 with dropdown menus. col4 has only dropdown while col6 has some values next to the dropdowns. So in this example, you want the dropdowns in col6 to be set to values that are in the cell, correct? Also, when is this code supposed to execute? Please confirm. Thanks. — Doug F, Oct 29 '19 at 12:42
@DougF well I have csv files that are imported and some of them in the col6 have pre existing values in some rows ..and nothing in the col4 (col4 is filled from the dropdown alone). I want if there is a value to check if exists in my dropdown list in that column, if it exist set it as selected, if it doesn't exist set this cell with red box and selected value is the default value - meaning the user has to choose alone. The code should be executed as soon as the user opens the page — miwa_p, Oct 30 '19 at 09:22

score 1 · Accepted Answer · answered Oct 29 '19 at 14:18

1

You can edit the select text you are entering. Following are the things which I think you want to achieve:

Identify if the dropdown has a certain value and preselect them if possible.
If the dropdown does not have correct value for pre selection then mark them as error field.

If the above mentioned points are incorrect please let me know i will make the relevant changes which are required.

I have added a condition check if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) you can replace it with any condition that you want.

Replace the following jquery snippets

$("tr").each(function () {
    var option = "",
        select = "",
        classObject = '',
        isSelected = false;

    if($(this).find("td:eq(3)")[0]){

        for (var i = 0; i < firstDDM.length; i++) {
            if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) {
                option += '<option selected="selected" value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
                isSelected = true;
            }
            else
                option += '<option value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
        }
        classObject = !isSelected ? 'errorDropDown' : '';
        select = '<select class="firstDDM' + ' ' + classObject + '" type="firstDDM">' + option + '</select>'

        $(this).find("td:eq(3)").append(select);
    }        
});

Add this class to the css file:

.errorDropDown {border: 1px solid red;}

answered Oct 29 '19 at 14:18

Arpit Bansal

493
1
4
15

thank you for the solution, works great, just a question .. how can I see if there exists a value before ? I would like that there isn't red box around the cell which didn't had the value before (i.e. was empty) – miwa_p Oct 30 '19 at 10:54
1

I have added the following code to get the existing value $(this).find("td:eq(3)")[0].innerHTML You can use the same value to check for its existence – Arpit Bansal Oct 30 '19 at 11:13
works now, but is there an option to maybe hide the text value after it was selected from the dropdown list ? I tried the visibility :hidden at css but that hides the dropdown list and shows the value that was from the csv file imported – miwa_p Oct 30 '19 at 11:47
Is there a reason for hiding the text. Can you create a code snippet or js fiddle for the same. Hiding is always a tricky business for an option inside the select option. [link](https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css) – Arpit Bansal Oct 31 '19 at 14:36
1

When the option is already choosen there is no need to show it twice and that is why I want to hide/ remove it. I managed to do this with changing the last part of the function. Checked where isSelected==True and there instead "append" i used "html" and it works – miwa_p Nov 04 '19 at 08:28
Sounds great! I would have suggested the same thing of using "html" instead of "append". – Arpit Bansal Nov 04 '19 at 08:53

setting a value in the dropdowns in table based on imported values [javascript, jquery]

1 Answers1