如何扩展此javascript/html或正确编写它？_Javascript_Html_Jquery

如何扩展此javascript/html或正确编写它？

javascript html jquery

如何扩展此javascript/html或正确编写它？,javascript,html,jquery,Javascript,Html,Jquery,我对javascript还不太熟悉。我有它的基本知识。（我是从使用HAXE编程语言制作简单的2d游戏开始的）。我试图对大量数据进行下拉排序。我失败得很惨。所以我查了几个例子，发现了这个： <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script t

我对javascript还不太熟悉。我有它的基本知识。（我是从使用HAXE编程语言制作简单的2d游戏开始的）。我试图对大量数据进行下拉排序。我失败得很惨。所以我查了几个例子，发现了这个：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#ddlCountry,#ddlAge").on("change", function () {
            var country = $('#ddlCountry').find("option:selected").val();
            var age = $('#ddlAge').find("option:selected").val();
            SearchData(country, age)
        });
    });
    function SearchData(country, age) {
        if (country.toUpperCase() == 'ALL' && age.toUpperCase() == 'ALL') {
            $('#table11 tbody tr').show();
        } else {
            $('#table11 tbody tr:has(td)').each(function () {
                var rowCountry = $.trim($(this).find('td:eq(1)').text());
                var rowAge = $.trim($(this).find('td:eq(2)').text());
                if (country.toUpperCase() != 'ALL' && age.toUpperCase() != 'ALL') {
                    if (rowCountry.toUpperCase() == country.toUpperCase() && rowAge == age) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                } else if ($(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != '') {
                    if (country != 'all') {
                        if (rowCountry.toUpperCase() == country.toUpperCase()) {
                            $(this).show();
                        } else {
                            $(this).hide();
                        }
                    }
                    if (age != 'all') {
                        if (rowAge == age) {
                            $(this).show();
                        }
                        else {
                            $(this).hide();
                        }
                    }
                }
 
            });
        }
    }
</script>
<select class="cl_country" id="ddlCountry">
    <option value="all">Select Class </option>
    <option value="India">india</option>
    <option value="usa">usa</option>
    <option value="uk">uk</option>
</select>
<select class="cl_age" id="ddlAge">
    <option value="all">Select Class </option>
    <option value="50">50</option>
    <option value="60">60</option>
    <option value="80">80</option>
</select>
<table style="width: 100%" id="table11" border="1">
    <tr>
        <th>name</th>
        <th>country</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>USA</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>UK</td>
        <td>50</td>
    </tr>
    <tr>
        <td>John</td>
        <td>INDIA</td>
        <td>80</td>
    </tr>
    <tr>
        <td>sam</td>
        <td>AUSTRALIA</td>
        <td>80</td>
    </tr>
    <tr>
        <td>joe</td>
        <td>INDIA</td>
        <td>60</td>
    </tr>
    <tr>
        <td>alan</td>
        <td>USA</td>
        <td>60</td>
    </tr>
</table>


$（文档）.ready（函数（）{
$（“#ddlCountry，#ddlAge”）。关于（“更改”，函数（）{
var country=$（“#ddlCountry”）.find（“选项：选定”）.val（）；
var age=$（'#ddlAge'）.find（“选项：选定”）.val（）；
搜索数据（国家、年龄）
});
});
功能搜索数据（国家、年龄）{
如果（country.toUpperCase（）='ALL'&&age.toUpperCase（）=='ALL'）{
$（#表11 t正文tr'）.show（）；
}否则{
$（#表11 t正文tr:has（td）'）。每个（函数）{
var rowCountry=$.trim（$（this.find（'td:eq（1）'））.text（）；
var rowAge=$.trim（$（this.find（'td:eq（2）'））.text（））；
if（country.toUpperCase（）！='ALL'和age.toUpperCase（）！='ALL'）{
if（rowCountry.toUpperCase（）==country.toUpperCase（）&&rowAge==age）{
$（this.show（）；
}否则{
$（this.hide（）；
}
}else if（$（this）.find（'td:eq（1）'）.text（）！=''this.find（'td:eq（1）'）.text（）！=''）{
如果（国家！=“全部”）{
如果（rowCountry.toUpperCase（）==国家/地区.toUpperCase（））{
$（this.show（）；
}否则{
$（this.hide（）；
}
}
如果（年龄！=“全部”）{
if（rowAge==年龄）{
$（this.show（）；
}
否则{
$（this.hide（）；
}
}
}
});
}
}
选课
印度
美国
英国
选课
50
60
80
名称
国家
年龄
吉尔
美国
50
前夕
英国
50
约翰
印度
80
山姆
澳大利亚
80
乔
印度
60
艾伦
美国
60

我测试了它，它的工作原理正是我想做的

但是我还有10多个下拉列表来过滤大量的数据。我试图通过添加新的变量来扩展这段代码，将它们传递到searchData函数中，等等。基本上，只要在“age”和“country”中的任何地方添加新行即可。数据看起来是正确的，但过滤不起作用

所以我开始深入研究这些嵌套的if/else。这种逻辑对我来说毫无意义。因此它给我带来了几个问题：

“全部”是什么意思
据我所知，td:eq（#）在表格中占有一席之地
为什么所有内容都转换成大写
如何扩展此代码以包含多个选择。。是大量的if/else，还是这段代码写得很糟糕，一个简单的循环就足够了

谢谢！如果这句话的措词不够好，我向你道歉。。通宵和一个破咖啡壶

“全部”是什么意思

“全部”来自以下内容：

var country = $('#ddlCountry').find("option:selected").val();    
var age = $('#ddlAge').find("option:selected").val();

然后将其传递给函数SearchData（国家/地区、年龄）

据我所知，td:eq（#）在表格中占有一席之地

使用eq选择器，该选择器根据括号（）内的索引选择元素。由于没有额外的过滤器，它将简单地获取该索引处的td。注意：索引是以0为基础的，因此如果有5个单元格，您将得到单元格0,1,2,3,4

为什么所有内容都转换成大写

在这种情况下，实际上没有理由转换为大写（或小写）。通常情况下，需要对用户输入的数据进行“规范化”。如果他们决定键入All、All、All等，那么将它们转换为“All”更容易比较

如何扩展此代码以包含多个选择。。会吗大量的if/else's or是不是这段代码写得很糟糕，而且是一个简单的循环够了吗

我不能回答这个问题，如果你不进一步澄清你试图实现的目标。现在你的逻辑大致是这样的：

If Country = "All" & Age = "All"
    Return Everything
If Country != '' Then
    If Country != 'All'
        Return Country rows that match
    If Age != 'All'
        Return Age rows that match

这个代码是多余的。如果rowCountry！=''比较或者rowCountry！=''。您可以将$（this.find（'td:eq（1）'）.text（）替换为rowCountry，以使其更易于阅读

$(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != ''

您可以看到此rowCountry设置为相同的值：

var rowCountry = $.trim($(this).find('td:eq(1)').text());