Question

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

{
"employee1":{"Emp_Id" :"ID-101" ,"F_Name" : "Chrish" ,"L_Name" : "Harish" ,"Year" : "1980" ,"Department" : "Computer"},
"employee2":{"Emp_Id" :"ID-102" ,"F_Name" : "Robin" ,"L_Name" : "Smith" ,"Year" : "1984" ,"Department" : "Business"},
"employee3":{"Emp_Id" :"ID-103" ,"F_Name" : "Jessica" ,"L_Name" : "Hudson" ,"Year" : "1974" ,"Department" : "Human Resource"}
}

<html>
<head>
 <title>In Class 2</title>
</head>
<body>

<button onclick="inclass()">inclass</button>
<script type="text/javascript">
function inclass()
{
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);  

 document.write("<table border='1'>")
			document.write("<tr>");
			document.write("<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>");
			document.write("</tr>");
		
for(var ob in data)
         { 
		 document.write("<tr>");
           document.write("<td>"+ data[ob].Emp_Id + "</td>");
		   document.write("<td>"+ data[ob].F_Name + "</td>");
		   document.write("<td>"+ data[ob].L_Name + "</td>");
		   document.write("<td>"+ data[ob].Year + "</td>");
		   document.write("<td>"+ data[ob].Department + "</td>");
		   document.write("</tr>");
          }
		  document.write("</table>");
 }
}
</script>
</body>
</html>

Answer 1

您好，请检查代码

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


});

和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>

供您参考https://plnkr.co/edit/Y53vavWFe8EW3TTCpOL2?p=preview

所以搜索选项将根据你输入的密钥

进行搜索

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

1 个答案: