Javascript 需要帮助创建一个表单，以便在搜索姓氏和年份的基础上获取记录_Javascript_Json

Javascript 需要帮助创建一个表单，以便在搜索姓氏和年份的基础上获取记录

javascript json

Javascript 需要帮助创建一个表单，以便在搜索姓氏和年份的基础上获取记录,javascript,json,Javascript,Json,我用json创建了一个表。我需要为用户创建一个搜索按钮，以输入一个搜索表单，该表单根据姓氏搜索员工记录，并且该程序还必须列出用户输入的在两年之间出生的员工 { “雇员1”：{“Emp_Id”：“Id-101”，“F_Name”：“Chrish”，“L_Name”：“Harish”，“Year”：“1980”，“Department”：“Computer”}， “雇员2”：{“Emp_Id”：“Id-102”，“F_姓名”：“Robin”，“L_姓名”：“Smith”，“年份”：“1984”，“

我用json创建了一个表。我需要为用户创建一个搜索按钮，以输入一个搜索表单，该表单根据姓氏搜索员工记录，并且该程序还必须列出用户输入的在两年之间出生的员工

{
“雇员1”：{“Emp_Id”：“Id-101”，“F_Name”：“Chrish”，“L_Name”：“Harish”，“Year”：“1980”，“Department”：“Computer”}，
“雇员2”：{“Emp_Id”：“Id-102”，“F_姓名”：“Robin”，“L_姓名”：“Smith”，“年份”：“1984”，“部门”：“业务”}，
“雇员3”：{“Emp_Id”：“Id-103”，“F_姓名”：“杰西卡”，“L_姓名”：“哈德逊”，“年份”：“1974”，“部门”：“人力资源”}
}


在2班
包括
函数inclass（）
{
var xml=new XMLHttpRequest（）；
open（“GET”，“ICemp.json”，true）；
xml.send（）；//用于发送请求
xml.onreadystatechange=function（）//检查是否发送了数据
{
var data=JSON.parse（xml.responseText）；
文件。写（“”）
文件。填写（“”）；
文档。写入（“+”Emp_Id“+”+“+”F_名称“+”+“+”+”L_名称“+”+”+“+”+”年“+”+”+“+”部门“+”）；
文件。填写（“”）；
for（数据中的var ob）
{ 
文件。填写（“”）；
document.write（“+data[ob].Emp_Id+”）；
document.write（“+data[ob].F_Name+”）；
document.write（“+data[ob].L_Name+”）；
文件。写入（“+数据[ob]。年+”）；
document.write（“+data[ob].Department+”）；
文件。填写（“”）；
}
文件。填写（“”）；
}
}

您好，请检查代码

// Add your javascript here
$(function(){

  var xml=new XMLHttpRequest();
xml.open("GET","ICemp.json",true);
xml.send();                                        //for sending request
xml.onreadystatechange=function()                 //checks if the data is sent

 {
 var data=JSON.parse(xml.responseText); 
 $('#here_table').empty();


      var $table = $('<table/>');
       $table.append("<td rowspan ='1'>" +"Emp_Id" +"</td>" +"<td colspan ='1'>" + "F_Name" +"</td>" +"<td colspan ='1'>" +"L_Name" +"</td>"+ "<td colspan ='1'>" + "Year" +"</td>" +"<td rowspan ='1'>" + "Department" +"</td>");
for(var ob in data){
    $table.append( '<tr><td>' +  data[ob].Emp_Id + '</td><td>' +  data[ob].F_Name + '</td><td>' +  data[ob].L_Name + '</td><td>' +  data[ob].Year + '</td><td>' +  data[ob].Department + '</td></tr>' );
}
$('#here_table').append($table);




 }
$('#search').on('keyup', function(e) {
    if ('' != this.value) {
        var reg = new RegExp(this.value, 'i'); // case-insesitive

        $('table').find('tr').each(function() {
            var $me = $(this);
            if (!$me.children('td').text().match(reg)) {
                $me.hide();
            } else {
                $me.show();
            }
        });
    } else {
        $('table').find('tr').show();
    }
});


});

//在此处添加您的javascript
$（函数（）{
var xml=new XMLHttpRequest（）；
open（“GET”，“ICemp.json”，true）；
xml.send（）；//用于发送请求
xml.onreadystatechange=function（）//检查是否发送了数据
{
var data=JSON.parse（xml.responseText）；
$（“#此处#表”）.empty（）；
变量$table=$（''）；
$table.append（“+”Emp_Id“+”+“+”F_名称“+”+”+“+”L_名称“+”+”+“+”+”年“+”+”+“+”部门“+”）；
for（数据中的var ob）{
$table.append（“”+数据[ob]。Emp_Id+“”+数据[ob]。F_名称+“”+数据[ob]。L_名称+“”+数据[ob]。年份+“”+数据[ob]。部门+“”）；
}
$（“#此处_表”）。追加（$table）；
}
$（'#search'）。在（'keyup'，函数（e）上{
如果（“”！=此.value）{
var reg=new RegExp（this.value，'i'）；//大小写不敏感
$（'table'）.find（'tr'）.each（function（）{
var$me=$（这个）；
if（！$me.children（'td'）.text（）.match（reg））{
$me.hide（）；
}否则{
$me.show（）；
}
});
}否则{
$（'table'）.find（'tr'）.show（）；
}
});
});

和HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <input placeholder="search name" id="search">
    <div id="here_table"> </div>


  </body>

</html>

供参考

因此，搜索选项将根据键u enter进行搜索。请提供代码示例。请将您的代码编辑到原始帖子中。很抱歉，我对此不太熟悉