Javascript 使用jQuery在html表中显示json数据

如何使用jQuery在html表中显示json数据？在搜索结果时如何删除区分大小写的内容

预期产量

如何在表格中显示结果？我怎样才能做到这一点

var数据=[{
“用户名”：“John Doe”，
“电子邮件”：jn@gmail.com",
“技能”：“java、c、html、css”
},
{
“用户名”：“简·史密斯”，
“电子邮件”：js@gmail.com",
“技能”：“java、sql”
},
{
“用户名”：“Chuck Berry”，
“电子邮件”：cb@gmail.com",
“技能”：“vuejs”
}
];
/*得到结果*/
函数getResult（）{
/*从输入字段读取值*/
var skills=$（“#skills”）.val（）| |“”，
email=$（“#email”）.val（）| |“”，
用户名=$（“#用户名”）.val（）；
var结果=[]，
我
对于（i=0；i

这是代码


var数据=[{
“用户名”：“John Doe”，
“电子邮件”：jn@gmail.com",
“技能”：“java、c、html、css”
},
{
“用户名”：“简·史密斯”，
“电子邮件”：js@gmail.com",
“技能”：“java、sql”
},
{
“用户名”：“Chuck Berry”，
“电子邮件”：cb@gmail.com",
“技能”：“vuejs”
}
];
函数BindDataToTable（d，obj）{
var keys=Object.keys（d[0]）；
var table=document.createElement（“表”）；
var trHead=document.createElement（“tr”）；
jQuery（键）。每个（（索引，项）=>{
var th=document.createElement（“th”）；
th.innerHTML=项目；
trHead.appendChild（th）
})
表2.追加子项（trHead）
对于（var i=0；i{
var td=document.createElement（“td”）；
td.innerHTML=d[i][item]；
tr.D.儿童（td）
})
表2.追加子项（tr）
}
jQuery（obj）.append（表）；
}
BindDataToTable（数据，“#tableElement”）
您需要创建一个表，并需要使用以下代码将即将出现的数据追加到此表中：-

$('#submit').click(function onClick() {
  var output = getResult();
  var html = '';
  $.each(output,function(key,value){
      html +='<tr>';
      html +='<td>'+ value.username + '</td>';
      html +='<td>'+ value.email + '</td>';
      html +='<td>'+ value.skills + '</td>';
      html +='</tr>';
  });
$('table tbody').html(html);
});




用户名
电子邮件ID
核心技能
您可以使用数据表jQuery插件直接从
json
生成表，就像

$('#tableId').DataTable({
    data: jsonData,
    columns: [
        { data: 'username',title:'Username'},
        { data: 'emailId',title:'EmailId'}, 
        { data: 'skils',title:'Core Skills'}
    ],
    "search": {
      "caseInsensitive": false
    }
});

有关更多详细信息，请参见数据表jQuery Plugin。
要进行不区分大小写的匹配，请比较
str1.toUpperCase（）==str2.toUpperCase（）
。您已经尝试将结果显示为表格了吗？尝试从
jqueryObject.append（）开始
为什么要在数据中创建循环？如果熟练，写C和电子邮件jn@gmail.com，您的代码返回第一个数据！！你的目标是什么？@barzin.A这是高级搜索。假设我搜索c，它会显示技能集为c的用户。就像你可以使用任何一个字段进行搜索一样。在显示的结果中，您将有另一个搜索选项，您可以根据需要过滤数据。是的，我注意到了你提出的问题。我们需要找到解决办法。在这种情况下，它应该显示错误消息谢谢，但是如何在搜索数据时删除区分大小写的信息？我对搜索有更多的疑问，比如如果我根据一个输入进行搜索，它会显示结果，比如如果我将输入1输入为c，将用户名输入为Chuck Berry，它将使用第一个输入进行搜索。实际上Chuck Berry没有c语言技能，所以它应该显示error no results found。我怎样才能修复它？谢谢，我会看看那个插件