我正在使用 DataTable 并且我试图让一些过滤功能与位于表格单元格中的选择元素一起使用。
通过在位于每列下方的输入字段中输入文本来进行过滤。然后过滤器功能检查该列的所有单元格中的选定文本，如果在一个单元格中没有找到匹配项，则隐藏相关行。
加载表格后，它会过滤表格一次。问题是在清除过滤器时，它不起作用。原因似乎与我将 selectedIndex 用于位于暂时不可见的行中的选择 DOM 对象有关。
“qu_owner_xxx”是选择元素的 ID。
var el1 = document.getElementById("qu_owner_4"); //Visible, works like a charm
console.log("ID 1 " + el1.id); //ID is printed
console.log("EL 1 " + el1.selectedIndex);
var el2 = document.getElementById("qu_owner_17"); //Hidden, returns null
console.log("ID 2 " + el2.id); //Not reaching here
console.log("EL 2 " + el2.selectedIndex) ; //Not reaching here
str = el.options[el.selectedIndex].text; //Just for showing how to get the string used for filtering later
问题是单元格的数据作为纯 html 传递给过滤器函数，而不是作为对象。我可以从执行$(aData[i2]).attr('id')的那部分获取 id，其中 aData 是表格行。但是使用 jQuery 时，与使用实际的 DOM 对象（例如 selectedIndex）相比，您似乎无法获得一些信息，尤其是当您必须从 html 中“重新创建”对象时。
如何从隐藏选择框/行的选定值中获取文本？甚至可能吗？
更新
我在jsfiddle测试了我的理论，但它实际上可以从隐藏的行/选择中检索信息。但毫无疑问，在我的过滤器功能中，未显示的行是失败的。
我的过滤器函数（DataTable 在过滤时调用此函数）
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var ret = true;
//Loop through all input fields i tfoot that has class 'sl_filter' attached
$('tfoot .sl_filter').each(function(i, obj){
//$(this) can be used. Get the index of this colum.
var i2 = $("tfoot input").index($(this));
//Create regexp to math
var r = new RegExp($(this).val(), "i");
var str = "";
if(i2 == 5){//This is just during development, don't want to care about other columns with select element so just doing things on this column
//Here I just pick two id, one that I know is visible and one that is not
var el1 = document.getElementById("qu_owner_4"); //Visible, works like a charm
console.log("ID 1 " + el1.id); //ID is printed
console.log("EL 1 " + el1.selectedIndex); //selectedIndex is printed
var el2 = document.getElementById("qu_owner_17"); //Hidden, returns null
console.log("ID 2 " + el2.id); //Not reaching here
console.log("EL 2 " + el2.selectedIndex) ; //Not reaching here
//This is how I intended to get it working, but fail
var el = document.getElementById($(aData[i2]).attr('id'));
str = el.options[el.selectedIndex].text; //String to be used for comparing
}
/*Test to see if there is a match or if the input value is the default
(the initial value of input before it has any fokus/text) */
if(r.test(str) || $(this).val()=="Search"){
//Return true only exits this function
return true;
}else{
/*Return false returns both function an .each. Retain 'false' in a variable scoped
to be reached outside the .each */
ret = false;
return false;
}
});
//Return true or false
return ret;
}
);
aData = 行。aData[x] 给了我该行单元格 x 的单元格内容。对于选择元素，它是原始 html。
this = 我输入的搜索字符串的输入字段。