我对jQuery很陌生,我在完成我想要的表的特定功能时遇到了一点麻烦。
我有一个db列表得到动态排序,我希望能够创建一个文本区,其中包括从列标题的单击上的特定列的文本。我从这个http://jsfiddle.net/4BwGG/3/中使用的代码中获得了一些功能,但这里有一些事情我无法弄清楚:
我有一些行在我的表中隐藏使用style="display: none"
属性在<tr>
标签,当脚本解析一切,从这些隐藏行的信息也包括在内。如何进行检查,以便仅将显示的行复制到文本区域?
下面是一个行条目的样子:
<tr filtermatch="false" style="display: none;">
<td>< a href="http://example.edu">Tommy Trojan< /a>< /td>
< td>123-555-1231< /td>
< td>Statue Man< /td>
< td>[LTS1] [LTS2] [PM] [PM2] [TA1] [TA2] < /td>
< td>tommy@example.edu< /td>
< /tr>`
函数如下:
function SelectColumn(index, tableId) {
var columnText = 'You selected:nn';
var columnSelector = '#' + tableId + ' tbody > tr > td:nth-child(' + (index + 1) + ')';
var cells = $(columnSelector);
// clear existing selections
if (window.getSelection) { // all browsers, except IE before version 9
window.getSelection().removeAllRanges();
}
if (document.createRange) {
cells.each(function(i, cell) {
var rangeObj = document.createRange();
rangeObj.selectNodeContents(cell);
window.getSelection().addRange(rangeObj);
columnText = columnText + 'n' + rangeObj.toString();
});
}
else { // Internet Explorer before version 9
cells.each(function(i, cell) {
var rangeObj = document.body.createTextRange();
rangeObj.moveToElementText(cell);
rangeObj.select();
columnText = columnText + 'n' + rangeObj.toString();
});
}
alert(columnText);
}
尝试将代码包装在检查tr
可见性的条件语句中。
if (document.createRange) {
cells.each(function(i, cell) {
if ($(cell).closest('tr').is(':visible')) {
var rangeObj = document.createRange();
rangeObj.selectNodeContents(cell);
window.getSelection().addRange(rangeObj);
columnText = columnText + 'n' + rangeObj.toString();
}
});
}
当然,您也希望在else块中做同样的事情。但是为了记录,jsFiddle在IE7中没有为我工作(它抛出一个关于不支持的属性或方法的错误)。
我知道您没有问,但是除非您需要列实际上被选中,否则我会重构代码。如果您希望列显示被选中,我可能会添加一些CSS。
其他人可能会进一步改进代码。但这是我的建议。我已经添加了注释来解释我做了什么和为什么。
function SelectColumn(index, tableId) {
// cache the table selector in a local variable
// because we are going to use it more than once
var columnText = 'You selected:nn',
table = $('#' + tableId),
cells = table.find('td:nth-child(' + (index + 1) + ')');
// reset the background color of all cells
table.find('td').css('background-color', '#fff');
cells.each(function(i, cell) {
// turn cell into a jQuery object and cache it
// because we are going to use it more than once
cell = $(cell);
if (cell.closest('tr').is(':visible')) {
// get the cell text and trim it
// because different browsers treat newlines differently
columnText += $.trim(cell.text()) + 'n';
// set a background color on the selected cells
cell.css('background-color', '#ccc');
}
});
alert(columnText);
}
如果您正在使用jquery,它将使事情变得非常容易。你可以在jquery中使用:visible来选择只可见的元素。
$(document).ready(function(){
var textAreaContent=[];
$('tr:visible').each(function(){
var content=$('<div />').append($(this).clone()).html();
textAreaContent.push(content);
});
$('.textarea').val(textAreaContent.join(''));
});
查看jsfiddle http://jsfiddle.net/sudhanshu414/9YeLm/
选择的其他选项是使用过滤器。如果你想过滤其他条件,这也很有用。
$(document).ready(function(){
var textAreaContent=[];
$('tr').filter(function(){ return $(this).css('display')!='none';}).each(function(){
var content=$('<div />').append($(this).clone()).html();
textAreaContent.push(content);
});
$('.textarea').val(textAreaContent.join(''));
});
Jsfiddle: http://jsfiddle.net/sudhanshu414/3GfqN/