Javascript HTML表的交互式筛选器，包含从JSON url动态加载的数据

01）我将数据从JSON url动态加载到HTML表中

02）我使用页面顶部的过滤器过滤结果

03）我从相同的JSON url动态加载过滤器中的数据

04）我将代码粘贴到下面的代码段中（它不会加载JSON数据，因为url包含

https

。我创建它只是为了让您看到代码。过滤器在这里不起作用

$.getJSON(
'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
功能（数据）{
var-tr；
$。每个（数据、函数（键、值）{
tr=$（''）；
tr.append（“”+val.first_name+“”）；
tr.append（“”+“”）；
tr.append（“”+val.id+“”）；
tr.append（''+'0.00'+''）；
tr.append（''+'0.00'+''）；
tr.append（''+'0.00'+''）；
$（'table'）。追加（tr）；
});
$。每个（数据、函数（键、值）{
li=$（“
”）；
li.追加（“”+val.first_name+”
）；
$（'ul'）。追加（li）；
});
$（“输入”）.keyup（多输入）；
});
$（“输入：复选框”）。单击（函数（）{
var showAll=true；
$（'tr'）.not（'first'）.hide（）；
$（'input[type=checkbox]'）。每个（函数（）{
如果（$（此）[0]。已选中）{
showAll=false；
var dimension1=$（this.attr（'rel'）；
var值=$（this.val（）；
$（'td.+dimension1+'[rel=“”+value+'“]'）。父（'tr'）.show（）；
}
});
if（showAll）{
$（'tr'）.show（）；
}
})；

h1{
字体大小：30px；
颜色：#fff；
文本转换：大写；
字体大小：300；
文本对齐：居中；
边缘底部：15px；
}
桌子{
宽度：100%；
表布局：固定；
}
.tbl标题{
背景色：rgba（255255,0.3）；
}
.tbl内容{
高度：300px；
溢出-x：自动；
边际上限：0px；
}
th{
填充：20px 15px；
文本对齐：左对齐；
字号：500；
字体大小：12px；
颜色：#fff；
文本转换：大写；
}
运输署{
填充：10px；
文本对齐：左对齐；
垂直对齐：中间对齐；
字体大小：300；
字体大小：12px；
颜色：#fff；
}
tr:N个孩子（奇数）td{
背景：#2cc3ce；
颜色：#0d3852；
}
/*演示样式*/
@导入url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
身体{
背景#0d3852；
字体系列：“Roboto”，无衬线；
}
部分{
利润率：50像素；
}
输入{
最大宽度：50px；
}
*,
*：之后，
*：：之前{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.空调定制{
填充：0.1em；
最大宽度：900px；
保证金：0自动；
}
.ac定制h2{
字号：1em；
字体大小：300；
填充：0.5em；
利润率：0.30px；
颜色：#0d3852；
}
.ac定制ul，
.ac定制ol{
列表样式：无；
填充：0；
保证金：0自动；
最大宽度：800px；
}
.ac海关李{
保证金：0自动；
填充：0.5em0；
位置：相对位置；
}
.ac定制标签{
显示：内联块；
位置：相对位置；
字号：1em；
填充：0 80px；
垂直对齐：顶部；
颜色：#0d3852；
光标：指针；
-webkit转换：颜色0.3s；
过渡：颜色0.3s；
}
.ac自定义输入[type=“checkbox”]，
.ac自定义输入[type=“radio”]，
.ac自定义标签：：之前{
宽度：20px；
高度：20px；
最高：50%；
左：0；
边缘顶部：-12px；
位置：绝对位置；
光标：指针；
}
.ac自定义输入[type=“checkbox”]，
.ac自定义输入[type=“radio”]{
不透明度：0；
-webkit外观：无；
显示：内联块；
垂直对齐：中间对齐；
z指数：100；
}
.ac自定义标签：：之前{
内容：''；
边框：1px实心#0d3852；
-webkit转换：不透明度0.3s；
过渡：不透明度0.3s；
}
.ac无线电标签：：之前{
边界半径：50%；
}
.ac自定义输入[type=“checkbox”]：选中+标签，
.ac自定义输入[type=“radio”]：选中+标签{
颜色：#fff；
} 
.ac自定义输入[type=“checkbox”]：选中+标签：：之前，
.ac自定义输入[type=“radio”]：选中+标签：：之前{
不透明度：0.8；
}
/*通用SVG和路径样式*/
.ac自定义svg{
位置：绝对位置；
宽度：20px；
高度：20px；
最高：50%；
边缘顶部：-12px；
左：0px；
指针事件：无；
}
.ac自定义svg路径{
行程：#0d3852；
笔画宽度：13px；
笔划线头：圆形；
笔划线条连接：圆形；
填充：无；
}
/*特定输入、SVG和路径样式*/
/*圈*/
.ac圆输入[type=“checkbox”]，
.ac圆输入[type=“radio”]，
.ac圆标签：：之前{
宽度：30px；
高度：30px；
利润上限：-15px；
左：10px；
位置：绝对位置；
}
.ac圆标签：：之前{
背景色：#fff；
边界：无；
}
.交流圆svg{
宽度：70px；
高度：70像素；
利润上限：-35px；
左：-10px；
}
.ac圆形svg路径{
笔画宽度：5px；
} 
/*盒装*/
.ac boxfill svg路径{
笔划宽度：8px；
} 
/*漩涡*/
.交流涡流svg路径{
笔划宽度：8px；
}
/*名单*/
.ac列表ol{
列表样式：十进制；
列表样式位置：内部；
}
.ac列表ol li{
字号：2em；
填料：1米1米0 2米；
文本缩进：-40px；
}
.ac列表ol li标签{
字体大小：0.5em；
文本缩进：0；
左侧填充：30px；
}
.ac列表标签：：之前{
显示：无；
}
.ac列表svg{
宽度：100%；
高度：80px；
左：0；
顶部：1.2米；
边际上限：0px；
}
.ac列表svg路径{
笔画宽度：4px；
}
.行{
左边距：-15px；
右边距：-15px；
边际上限：0；
}
.col-sm-4{
位置：相对位置；
最小高度：1px；
左侧填充：15px；
右侧填充：15px；
填充底部：30px；
}
@介质（最小宽度：768px）{
.col-sm-4{
浮动：左；
}
.col-sm-4{
宽度：33.33333%；
} 
.过滤柱{
背景色：#2cc3ce；
}
.筛选列alt{
背景色：#78D9E0；
最小高度：256px；
}

尺寸1

黛布拉
朱莉
诺玛
博比
亨利

名称
输入
主要价值
差异
差异/10
$('body').on('keyup', 'input', multInputs);

$('body').on('input', 'input', multInputs);