Javascript jQuery从准备好的html表中动态选择数据
我对从html表中动态选择数据有一些问题。 我给出了表和输入的示例,但实际上该表由数百行组成Javascript jQuery从准备好的html表中动态选择数据,javascript,jquery,html,Javascript,Jquery,Html,我对从html表中动态选择数据有一些问题。 我给出了表和输入的示例,但实际上该表由数百行组成 <select name="options"> <option value="equal">=</option> <option value="notequal">!=</option> <option value="more">></option> <option value="le
<select name="options">
<option value="equal">=</option>
<option value="notequal">!=</option>
<option value="more">></option>
<option value="less"><</option>
</select>
<input type="input" value="input numbers" id="filter">
所以我找到了第二个解决方案
var wys = $("table td.wys");
wys.each(function() {
$(this).attr('data-wys', parseInt($(this).text()));
});
我将属性和解析设置为int列值中的所有值
如果我选择“相等”、“不相等”、“或多或少”并按“我的数字…”,有人可以告诉我如何显示/隐藏表中的行。您可以使用.filter方法:
$("#filter").keyup(function() {
var filter = $("#filter").val();
var options = $("#options").val();
if(options == 'equal'){
$("table td.wys:contains('" + $(this).val() + "')").parent().show();
$("table td.wys:not(:contains('" + $(this).val() + "'))").parent().hide();
}
else if(options == 'notequal'){
$("table td.wys:contains('" + $(this).val() + "')").parent().hide();
$("table td.wys:not(:contains('" + $(this).val() + "'))").parent().show();
}
else if(options == 'more'){
//HOW TO SHOW/HIDE ROW GREATER THAN eg. 100
}
else {
//HOW TO SHOW/HIDE ROW SMALLER THAN eg. 100
}
});
var wys = $("table td.wys");
wys.each(function() {
$(this).attr('data-wys', parseInt($(this).text()));
});
// A helper object for doing some math
var operators = {
'equal': function(a, b) { return a == b },
'notequal': function(a, b) { return a != b },
'more': function(a, b) { return a > b },
'less': function(a, b) { return a < b }
};
var $tr = $('tr').not(':first'),
$sel = $("select[name='options']").on('change', function() {
// Trigger the keyup on the select's change event
$("#filter").keyup();
});
$("#filter").keyup(function () {
var v = $.trim(this.value),
o = $sel.val();
// Show all the TRs when the value's length is 0
if (!v.length) return $tr.show();
$tr.hide().filter(function () {
var t = $('.wys', this).text();
return operators[o](t, v);
}).show();
});