Question

我使用jquery将数据解析为表格格式但是我想创建一个专业的搜索框和评级如何使用jquery创建可以帮助我一些关于这个谢谢你

$(document).ready(function(){
       var doctorsData = '[{"Name":"John","speciality":"orthopaedic","area":"fremont","rating":"9" },{"Name":"Max","speciality":"dentist","area":"fremont","rating":"10" },        {"Name":"Suzi","speciality":"cardiologist","area":"fremont","rating":"7" },{"Name":"Ron","speciality":"orthopaedic","area":"fremont","rating":"8" },{"Name":"Tracy","speciality":"orthopaedic","area":"fremont","rating":"7" },{"Name":"Terry","speciality":"cardiologist","area":"fremont","rating":"9" },{"Name":"Steve","speciality":"dentist","area":"Belmont","rating":"10" },{"Name":"Lee","speciality":"cardiologist","area":"Belmont","rating":"9" },{"Name":"Luci","speciality":"orthopaedic","area":"Belmont","rating":"7" },{"Name":"Lema","speciality":"cardiologist","area":"Belmont","rating":"6" },{"Name":"Stan","speciality":"orthopaedic","area":"Belmont","rating":"9" },{"Name":"Sam","speciality":"dentist","area":"Belmont","rating":"5" }]';

        var table='<table><thead><th>Name</th><th>Speciality</th><th>Area</th><th>Rating</th></thead><tbody>';
        var obj = $.parseJSON(doctorsData);
        $.each(obj, function(){
           table =table+ '<tr><td>'+this['Name']+'</td><td>'+ this['speciality']+'</td><td>'+this['area']+'</td><td>'+this['rating']+'</td></tr>';
        });
        table = table+'</tbody></table>';
        document.getElementById("datalist").innerHTML=table;
    });

 .search{
            margin-bottom: 10px;

        }
        table,th,td{
            border: 1px solid #000;
            border-collapse: collapse;
            padding: 5px;
            text-align: center;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
    Speciality:<input type="text">
    Rating<input type="text">
    </div>
    <div id="datalist"></div>

Answer 1

我已经为您的专业盒子概述了下面的方法。您应该能够从中学到足够的知识来自行尝试评级框。

首先，您需要在输入框中添加ID，以便我们可以使用jQuery轻松获取它们。

Speciality: <input type="text" id="txtSpeciality">
Rating: <input type="text" id="txtRating">

接下来，添加一个监听器，以便每当有人在输入框中输入时检查匹配项：

$("#txtSpeciality").on("input", function() { //When someone types in the box
     var spec = $(this).val(); //Get the value from the textbox
     var $hasText = $("table tbody tr td:nth-child(2):contains(" + spec + ")"); //Find any cells in column 2 that have the value from the textbox
     $("table tbody tr").hide(); //Hide all rows
     $hasText.parent().show(); //Show any that have the text
});

最终产品看起来像这样：

$(document).ready(function(){
       var doctorsData = '[{"Name":"John","speciality":"orthopaedic","area":"fremont","rating":"9" },{"Name":"Max","speciality":"dentist","area":"fremont","rating":"10" },        {"Name":"Suzi","speciality":"cardiologist","area":"fremont","rating":"7" },{"Name":"Ron","speciality":"orthopaedic","area":"fremont","rating":"8" },{"Name":"Tracy","speciality":"orthopaedic","area":"fremont","rating":"7" },{"Name":"Terry","speciality":"cardiologist","area":"fremont","rating":"9" },{"Name":"Steve","speciality":"dentist","area":"Belmont","rating":"10" },{"Name":"Lee","speciality":"cardiologist","area":"Belmont","rating":"9" },{"Name":"Luci","speciality":"orthopaedic","area":"Belmont","rating":"7" },{"Name":"Lema","speciality":"cardiologist","area":"Belmont","rating":"6" },{"Name":"Stan","speciality":"orthopaedic","area":"Belmont","rating":"9" },{"Name":"Sam","speciality":"dentist","area":"Belmont","rating":"5" }]';

        var table='<table><thead><th>Name</th><th>Speciality</th><th>Area</th><th>Rating</th></thead><tbody>';
        var obj = $.parseJSON(doctorsData);
        $.each(obj, function(){
           table =table+ '<tr><td>'+this['Name']+'</td><td>'+ this['speciality']+'</td><td>'+this['area']+'</td><td>'+this['rating']+'</td></tr>';
        });
        table = table+'</tbody></table>';
        document.getElementById("datalist").innerHTML=table;
  
        $("#txtSpeciality").on("input", function() {
             var spec = $(this).val();
             var $hasText = $("table tbody tr td:nth-child(2):contains(" + spec + ")");
             $("table tbody tr").hide();
             $hasText.parent().show();
       });
    });

.search{
            margin-bottom: 10px;

        }
        table,th,td{
            border: 1px solid #000;
            border-collapse: collapse;
            padding: 5px;
            text-align: center;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
    Speciality:<input type="text" id="txtSpeciality">
    Rating<input type="text" id="txtRating">
    </div>
    <div id="datalist"></div>

Answer 2

请注意，你有一个拼写错误：我认为你正在寻找“专业”。

您需要为每个搜索输入添加一个类，以便稍后识别它们：

<div class="search">
    Specialty: <input class="specialty" data-col="specialty" type="search" />
    Rating: <input class="rating" data-col="rating" type="search" />
</div>

然后更改JavaScript，以便您可以使用过滤的数据集重建表，并为每个输入添加事件：

$(document).ready(function(){
    var doctorsData = [{"Name":"John","specialty":"orthopaedic","area":"fremont","rating":"9" },{"Name":"Max","specialty":"dentist","area":"fremont","rating":"10" },        {"Name":"Suzi","specialty":"cardiologist","area":"fremont","rating":"7" },{"Name":"Ron","specialty":"orthopaedic","area":"fremont","rating":"8" },{"Name":"Tracy","specialty":"orthopaedic","area":"fremont","rating":"7" },{"Name":"Terry","specialty":"cardiologist","area":"fremont","rating":"9" },{"Name":"Steve","specialty":"dentist","area":"Belmont","rating":"10" },{"Name":"Lee","specialty":"cardiologist","area":"Belmont","rating":"9" },{"Name":"Luci","specialty":"orthopaedic","area":"Belmont","rating":"7" },{"Name":"Lema","specialty":"cardiologist","area":"Belmont","rating":"6" },{"Name":"Stan","specialty":"orthopaedic","area":"Belmont","rating":"9" },{"Name":"Sam","specialty":"dentist","area":"Belmont","rating":"5" }];
    // Render with all the data once the DOM is ready
    renderTable(doctorsData);
    // Add an event that fires whenever a search term is changed
    // (this can optionally be changed to fire whenever a key is pressed)
    $('.search input[type="search"]').on('change', function(){
        var $input = $(this);
        var searchCol = $input.data('col');
        var searchText = $input.val();
        renderTable(getFilteredData(doctorsData, searchCol, searchText));
    });
});

function getFilteredData (originalData, colName, text) {
    var data = [];
    text = text.toLowerCase(); // optional
    if (text.length == 0) { // if there is no search term, use all data
        return originalData;
    }
    // Loop over original data...
    $.each(originalData, function(i, row) {
        // If we find the search text then add this row to the data to return
        if (row[colName].indexOf(text) > -1) {
            data.push(row);
        }
    });
    return data;
}

function renderTable (data) {
    var table = '<table><thead><th>Name</th><th>Speciality</th><th>Area</th><th>Rating</th></thead><tbody>';
    $.each(data, function(){
       table += '<tr><td>' + this['Name'] + '</td><td>' + this['speciality'] + '</td><td>' + this['area'] + '</td><td>' + this['rating'] + '</td></tr>';
    });
    table += '</tbody></table>';
    document.getElementById("datalist").innerHTML = table;
});

使用jquery添加搜索按钮

2 个答案: