javascript drop downs基于值隐藏/显示表格行 [英] javascript drop downs hide/show table rows based on values
问题描述
我正在学习代码，但一直负责创建表格，并且当用户从多个下拉列表中选择时，无论用户选择什么，都会显示在表格中。 （非选定的行被隐藏）
我想将代码放入一个新的html文件并运行。 （我的测试是剪切并粘贴到txt文档中，然后将名称更改为html进行测试）我可以为其他类型的脚本执行此操作，但出于某种原因，我似乎无法使其运行。 p>
< script language =javascript>
$（document）.ready（function（）{
$（'select.ddlFilterTableRow'）。bind（'change'，function（）{
$（'select.ddlFilterTableRow'） .attr（'disabled'，'disabled'）;
$（'＃tableRegisterKids'）。find（'。Row'）。hide（）;
var critriaAttribute ='';
$（'select.ddlFilterTableRow'）。each（function（）{
if（$（this）.val（）！='0'）{
critriaAttribute + ='[data - '+ $（this）.data（'attribute'）+'=''+ $（this）.val（）+']';
}
}）;
$（'＃tableRegisterKids'）。find（'。Row'+ critriaAttribute）.show（）;
$（'＃headerCount'）。html（$（'table＃tableRegisterKids tr.Row： （'''''）;'
}）;
$（'select.ddlFilterTableRow'）。removeAttr（'disabled'）;
}）;< / script> ;
< select id =ddlAgeclass =ddlFilterTableRowdata-attribute =age>
< option value =0>全选< / option>
< option value =10> 10< / option>
< option value =8> 8< / option>
< option value =6> 6< / option>
< / select>
< option value =0>全选< / option>
< option value =足球>足球< / option>
< option value =国际象棋>象棋< / option>
< option value =Cricket>板球< / option>
< option value =保龄球>保龄球< / option>
< / select>
< h1 id =headerCount>< / h1>
< table id =tableRegisterKids>
< tr>
< th>全名< / th>
< th>年龄< / th>
< th> Sport< th>
< / tr>
< tr class =Rowdata-age =10data-sports =Foot Ball>
< td> Thulasi Ram.S< / td>
< td> 10< / td>
< td>足球< / td>
< / tr>
< tr class =Rowdata-age =8data-sports =Cricket>
< td> Ram< / td>
< td> 8< / td>
< td>板球< / td>
< / tr>
< tr class =Rowdata-age =6data-sports =Chess>
< td> Ram Kumar.S< / td>
< td> 6< / td>
< td>象棋< / td>
< / tr>
< tr class =Rowdata-age =8data-sports =Bowling>
< td> Dinesh Kumar.S< / td>
< td> 8< / td>
< td>保龄球< / td>
< / tr>
< tr class =Rowdata-age =6data-sports =Bowling>
< td> Raja Ram.S< / td>
< td> 6< / td>
< td>保龄球< / td>
< / tr>
< tr class =Rowdata-age =10data-sports =Chess>
进入你的文本文件？代码在这里运行良好。 http://jsfiddle.net/zLPMV/
你需要确保你的页面中包含jQuery，一个简单的测试就是从谷歌资源中获取它。将这行代码添加到脚本标记上方的文本文件中。
< script src =// ajax.googleapis。 COM / AJAX /库/ jquery的/ 1.10.2 / jquery.min.js>< /脚本>
PS您是自己编写这段代码还是仅仅将它用作资源并尝试获取它运行？
I am learning code, but have been tasked with creating a table, and when the user selects from multiple drop-down lists, whatever the user selected, is displayed in the table. (non-selected rows get hidden)
I want to place the code into a new html file and have it run. (my test is to cut and paste it into a txt doc, then change the name to html for testing) I can do this for other types of scripts, but for some reason, I cannot seem to get this one to run.
<script language="javascript">
$(document).ready(function () {
$('select.ddlFilterTableRow').bind('change', function () {
$('select.ddlFilterTableRow').attr('disabled', 'disabled');
$('#tableRegisterKids').find('.Row').hide();
var critriaAttribute = '';
$('select.ddlFilterTableRow').each(function () {
if ($(this).val() != '0') {
critriaAttribute += '[data-' + $(this).data('attribute') + '="' + $(this).val() + '"]';
}
});
$('#tableRegisterKids').find('.Row' + critriaAttribute).show();
$('#headerCount').html($('table#tableRegisterKids tr.Row:visible').length + ' Registered Kids');
$('select.ddlFilterTableRow').removeAttr('disabled');
});
});</script>
<select id="ddlAge" class="ddlFilterTableRow" data-attribute="age">
<option value="0">Select All</option>
<option value="10">10</option>
<option value="8">8</option>
<option value="6">6</option>
</select>
<select id="ddlSport" class="ddlFilterTableRow" data-attribute="sports">
<option value="0">Select All</option>
<option value="Foot Ball">Foot Ball</option>
<option value="Chess">Chess</option>
<option value="Cricket">Cricket</option>
<option value="Bowling">Bowling</option>
</select>
<h1 id="headerCount"></h1>
<table id="tableRegisterKids">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
</tr>
<tr class="Row" data-age="10" data-sports="Foot Ball">
<td>Thulasi Ram.S</td>
<td>10</td>
<td>Foot Ball</td>
</tr>
<tr class="Row" data-age="8" data-sports="Cricket">
<td>Ram</td>
<td>8</td>
<td>Cricket</td>
</tr>
<tr class="Row" data-age="6" data-sports="Chess">
<td>Ram Kumar.S</td>
<td>6</td>
<td>Chess</td>
</tr>
<tr class="Row" data-age="8" data-sports="Bowling">
<td>Dinesh Kumar.S</td>
<td>8</td>
<td>Bowling</td>
</tr>
<tr class="Row" data-age="6" data-sports="Bowling">
<td>Raja Ram.S</td>
<td>6</td>
<td>Bowling</td>
</tr>
<tr class="Row" data-age="10" data-sports="Chess">
Are you including jQuery when you copy and paste the code into your text file?? The code is running well here. http://jsfiddle.net/zLPMV/
You need to make sure you include jQuery into your page an easy test is to take it from google resources. Add this line of code to your text file above your script tag.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
P.S Did you write this code yourself or are you just using it as a resource and trying to get it to run?
这篇关于javascript drop downs基于值隐藏/显示表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
