繁体   English   中英

根据导入的值在表的下拉列表中设置一个值 [javascript, jquery]

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

我有一个用 csv 文件动态填充的表。 我创建了一个表格,该表格本身在某些列中有下拉菜单。

我现在要做的是检查一个值是否存在于下拉列表应该存在的单元格中,如果存在,则检查它是否存在于下拉列表中,如果是,则将其设置为在下拉列表中选择,否则选择为默认值并且单元格周围出现红色边缘。

这是一个 jsFiddle,其中有一个示例,说明我的代码当前的样子:

https://jsfiddle.net/r236uy5k/

编辑:我更正了我的 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>

您可以编辑正在输入的 select 文本。 以下是我认为您想要实现的目标:

  1. 确定下拉菜单是否具有特定值并在可能的情况下预先选择它们。
  2. 如果下拉列表没有正确的预选择值,则将它们标记为错误字段

如果上述几点不正确,请告诉我,我将进行所需的相关更改。

我添加了一个条件检查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;}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM