【问题标题】：Filter rows and show only selected ones on screen过滤行并仅在屏幕上显示选定的行
【发布时间】：2016-10-01 05:22:31
【问题描述】：

我已使用 csv 文件填充屏幕上的表格。我需要使用逗号分隔的 ID 值（例如 1、2、8、34）过滤此表，并在单击“过滤器”按钮时仅显示这些值中使用的那些行。

HTML 文件 -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html>
<head>
    <title>Hello there</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
    <!--<script type="text/javascript" src="JavaScript.js"></script>-->
    <script type="text/javascript" src="JavaScript2.js"></script>
   
    
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
        }

        th {
            text-align: left;
        }

        table {
            border-spacing: 5px;
        }

        .guide {
            text-decoration: underline;
            text-align: center;
        }

        .odd {
            color: #fff;
            background: #666;
        }

        .even {
            color: #666;
        }

        .hot {
            border: 1px solid #f00;
        }
    </style>

</head>
<body>

    <div class="container">
        <div class="row">
            <h2>aaaaaaaaaaaaaaaaa</h2>            
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">pppppp</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-12 col-sm-offset-1">
                        
                        <form id="form1" runat="server" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-5">
                                    <div class="col-sm-6">
                                        <input type="file" accept=".csv" id="fileUpload" /></div>
                                    <div class="col-sm-6">
                                        <input type="button" id="upload" class="btn btn-primary" value="Upload" /></div>

                                </div>
                                <div class="col-sm-7">
                                    <div class="col-sm-2">
                                        <input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility: hidden" /></div>
                                    <div class="col-sm-2">
                                        <input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility: hidden" /></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-default" style="align-self: center">
                            <div class="panel-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <center>
                                                        <div class="input-append" id="filterDev" style="visibility:hidden">
                                                          <input name="search" id="inputFilter" placeholder="Enter ID to filter" />
                                                             <input type="button" value="Filter" id="filter" class="btn btn-primary" />
                                                                </div></center>
                                    </div>
                                    <br />
                                    <br />

                                </div>
                                <div class="row">
                                    <div class="col-sm-12" id="dvCSV"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                  <div class="col-sm-12"><p id="download" style="color:cornflowerblue; visibility:hidden"><strong>Please click the below links to download the processed file..</strong></p></div>
                </div>
                <div class="row">
                     <div class="col-sm-12">
                         <div class="col-sm-3"><p id="File1" style="color:cornflowerblue;text-decoration:underline;visibility:hidden">File1 Download</p></div>
                         <div class="col-sm-3"><p id="File2" style="color:cornflowerblue;text-decoration:underline;visibility:hidden">File2 Download</p></div>
                     </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>
<script type="text/javascript">

$("#cancel").on("click", function() {
    $('input:checked').each( function() {
        $( this ).closest("tr").remove();
    });
});

$('#inputFilter').keyup(function () {
    var that = this;
    $.each($('tr'),
    function (i, val) {
        if ($(val).text().indexOf($(that).val()) == -1) {
            $('#name').animate({
                marginTop: 0
            },
            50,
            function () {
                $('tr').eq(i).hide();
            });
        } else {
            $('#name').animate({
                marginTop: 0
            },
            50,
            function () {
                $('tr').eq(i).show();
            });
        }
    });
});

$(function () {
    $("#process").bind("click", function () {

        document.getElementById("File1").style.visibility = "visible";
        document.getElementById("File2").style.visibility = "visible";
        document.getElementById("download").style.visibility = "visible";

    });

});

</script>

JavaScript2.js

$(function () {
    $("#upload").bind("click", function () {
 
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileUpload").val().toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var table = $("<table id='name'/>");
                    var rows = e.target.result.split("\n");
                    for (var i = 0; i < rows.length; i++) {
                        var row = $("<tr />");
                        var cells = rows[i].split(",");
                        
                        $("<td/>").html('<input type="checkbox" id='+cells[0]+'>').appendTo(row);
                        //alert(cells[0]);
                        for (var j = 0; j < cells.length; j++) {
                            
                            $("<td/>").html('<input type="text" disabled value=' +cells[j]+ '>').appendTo(row);
                        }
                        table.append(row);
                    }
                    $("#dvCSV").html('');
                    $("#dvCSV").append(table);
                    document.getElementById("cancel").style.visibility = "visible";
                    document.getElementById("process").style.visibility = "visible";
                    document.getElementById("filterDev").style.visibility = "visible";
                    //document.getElementById("filter").style.visibility = "visible";

                }
                reader.readAsText($("#fileUpload")[0].files[0]);
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid CSV file.");
        }
        
    });
});

类似的东西 -

编辑#1

使用@user3273700 的脚本后，虽然过滤器功能有效，但每次我表的最后一列显示“未定义”。 csv 文件看起来像这样 -

表格看起来像这样 -

修改后的 HTML -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html>
<head>
    <title>J---</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
    <!--<script type="text/javascript" src="JavaScript.js"></script>-->
    <script type="text/javascript" src="JavaScript4.js"></script>


    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
        }

        th {
            text-align: left;
        }

        table {
            border-spacing: 5px;
        }

        .guide {
            text-decoration: underline;
            text-align: center;
        }

        .odd {
            color: #fff;
            background: #666;
        }

        .even {
            color: #666;
        }

        .hot {
            border: 1px solid #f00;
        }
    </style>

</head>
<body>

    <div class="container">
        <div class="row">
            <h2>SAS</h2>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Aa</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-12 col-sm-offset-1">

                        <form id="form1" runat="server" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-sm-5">
                                    <div class="col-sm-6">
                                        <input type="file" accept=".csv" id="fileUpload" />
                                    </div>
                                    <div class="col-sm-6">
                                        <input type="button" id="upload" class="btn btn-primary" value="Upload" />
                                    </div>

                                </div>
                                <div class="col-sm-7">
                                    <div class="col-sm-2">
                                        <input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility: hidden" />
                                    </div>
                                    <div class="col-sm-2">
                                        <input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility: hidden" />
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-default" style="align-self: center">
                            <div class="panel-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <center>
                                                        <div class="input-append" id="filterDev" style="visibility:hidden">
                                                          <input name="search" id="inputFilter" placeholder="Enter ID to filter" />
                                                             <input type="button" value="Filter" id="filter" class="btn btn-primary" />
                                                                </div></center>
                                    </div>
                                    <br />
                                    <br />

                                </div>
                                <div class="row">
                                    <div class="col-sm-12" id="dvCSV">
                                        <table id="my-table">

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <p id="download" style="color: cornflowerblue; visibility: hidden"><strong>Please click the below links to download the processed file..</strong></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="col-sm-3">
                            <p id="File1" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File1 Download</p>
                        </div>
                        <div class="col-sm-3">
                            <p id="File2" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File2 Download</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
</html>
<script type="text/javascript">

    $("#cancel").on("click", function () {
        $('input:checked').each(function () {
            $(this).closest("tr").remove();
        });
    });


    $(function () {
        $("#process").bind("click", function () {

            document.getElementById("File1").style.visibility = "visible";
            document.getElementById("File2").style.visibility = "visible";
            document.getElementById("download").style.visibility = "visible";

        });

    });

    $("#filter").click(function () {
        ids = $("#inputFilter").val();
        if (ids != "") {
            idsArray = ids.split(",");
            $("#my-table tr:gt(0)").hide();
            $.each(idsArray, function (i, v) {
                $("#my-table tr[data-id=" + v + "]").show();
            })
        } else {
            $("#my-table tr").show();
        }
    });

</script>

修改后的 JavaScript4.js -

$(function () {
    $("#upload").bind("click", function () {

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileUpload").val().toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    //var table = $("<table id='name'/>");
                    var lines = e.target.result.split("\n");
                    var result = [];
                    var headers = lines[0].split(",");
                    //alert(headers);

                    for (var i = 1; i < lines.length; i++) {
                        var obj = {};
                        var currentline = lines[i].split(",");

                        for (var j = 0; j < headers.length; j++) {
                            obj[headers[j]] = currentline[j];
                        }
                        result.push(obj);
                    }


                    populateTable(result);
                    document.getElementById("cancel").style.visibility = "visible";
                    document.getElementById("process").style.visibility = "visible";
                    document.getElementById("filterDev").style.visibility = "visible";
                }
                reader.readAsText($("#fileUpload")[0].files[0]);
            }
        }

    });
});

$(function () {
    $("#process").bind("click", function () {

        document.getElementById("File1").style.visibility = "visible";
        document.getElementById("File2").style.visibility = "visible";

    });

});

function populateTable(finalObject) {

    var obj = finalObject;
    var table = $("<table id='my-table' />");
    table[0].border = "1";
    var columns = Object.keys(obj[0]);
 
    var columnCount = columns.length;
    var row = $(table[0].insertRow(-1));
  
    for (var i = 0; i < columnCount; i++) {
        var headerCell = $("<th />");
        headerCell.html([columns[i]]);
        row.append(headerCell);
    }
    
    $.each(obj, function (i, obj) {
        row = '<tr data-id="' + obj.ID + '"><td>' + obj.ID + '</td><td>' + obj.NAME + '</td><td>' + obj.CITY + '</td><td>' + obj.ADDRESS + '</td></tr>';
        table.append(row);
    });


    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);

}

【问题讨论】：

所以？ …………
您可以使用 jquery data api 添加自定义属性，然后使用此引用来过滤您的表格行

标签： javascript jquery html css csv

【解决方案1】：

您可以在将行附加到表中时为每一行添加自定义属性 (data-id)，然后使用此引用来过滤表。

试试这个工作示例

$(function() {
  var data = [{
    id: "1",
    name: "Ravi",
    city: "Mumbai",
    address: "Address1",
    designation: "programer"
  }, {
    id: "2",
    name: "Mohit",
    city: "Delhi",
    address: "Address1",
    designation: "Project Manager"
  }, {
    id: "3",
    name: "Mohan",
    city: "Mumbai",
    address: "Address1",
    designation: "CEO"
  }, {
    id: "4",
    name: "John",
    city: "Landon",
    address: "Address1",
    designation: "programer"
  }, {
    id: "5",
    name: "Jane",
    city: "Landon",
    address: "Address1",
    designation: "programer"
  }];


  //set table header
  var headRow = '<tr>';
  $.each(data[0], function(attr, val) {
    headRow += '<th>' + attr + '</th>'
  });
  headRow += '</tr>';
  $("#my-table").append(headRow);

  //add data rows to table

  $.each(data, function(i, obj) {
    row = '<tr data-id="' + obj.id + '"><td>' + obj.id + '</td><td>' + obj.name + '</td><td>' + obj.city + '</td><td>' + obj.address + '</td><td>' + obj.designation + '</td></tr>';
    $("#my-table").append(row);
  });

  $("#filter-btn").click(function() {
    ids = $("#filter-box").val();
    if (ids != "") {
      idsArray = ids.split(",");
      $("#my-table tr:gt(0)").hide();
      $.each(idsArray, function(i, v) {
        $("#my-table tr[data-id=" + v + "]").show();
      })
    } else {
      $("#my-table tr").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="filter-box">
<button id="filter-btn">filter</button>
<table id="my-table">

</table>

希望对你有帮助

【讨论】：

我使用了脚本和过滤器功能，但我的表格的最后一列没有被填充。请检查#Edit1 部分

【解决方案2】：

因为它读取标题行的最后一列作为“ADDRESS\r”（带有回车）而不是“ADDRESS”，所以您得到了未定义。当您使用它来创建对象数组时，它会设置一个属性“ADDRESS\r”而不是“ADDRESS”。

所以你需要像这样从你的 headers 数组中删除它。

var headers = lines[0].split(",").map(function(obj){
    return obj.replace(/(?:\\[rn]|[\r\n]+)+/g,''); 
});

这是一个工作小提琴https://jsfiddle.net/1av8gzo5/

【讨论】：