根據導入的值在表的下拉列表中設置一個值 [javascript, jquery]

Question

我有一個用 csv 文件動態填充的表。 我創建了一個表格，該表格本身在某些列中有下拉菜單。

我現在要做的是檢查一個值是否存在於下拉列表應該存在的單元格中，如果存在，則檢查它是否存在於下拉列表中，如果是，則將其設置為在下拉列表中選擇，否則選擇為默認值並且單元格周圍出現紅色邊緣。

這是一個 jsFiddle，其中有一個示例，說明我的代碼當前的樣子：

編輯：我更正了我的 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>

Answer 1

您可以編輯正在輸入的 select 文本。 以下是我認為您想要實現的目標：

確定下拉菜單是否具有特定值並在可能的情況下預先選擇它們。
如果下拉列表沒有正確的預選擇值，則將它們標記為錯誤字段。

如果上述幾點不正確，請告訴我，我將進行所需的相關更改。

我添加了一個條件檢查if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML)你可以用你想要的任何條件替換它。

替換以下 jquery 片段

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

將此 class 添加到 css 文件中：

.errorDropDown {border: 1px solid red;}

根據導入的值在表的下拉列表中設置一個值 [javascript, jquery]

問題描述

1 個解決方案

解決方案1
1 已采納 2019-10-29 14:18:57

根據導入的值在表的下拉列表中設置一個值 [javascript, jquery]

問題描述

1 個解決方案

解決方案1 1 已采納 2019-10-29 14:18:57

解決方案1
1 已采納 2019-10-29 14:18:57