2

私はjQueryを初めて使い、テーブルに必要な特定の機能を達成するのに少し苦労しています。

動的にソートされるデータベースリストがあり、列ヘッダーをクリックして特定の列のテキストを含むテキストエリアを作成できるようにしたいと考えています。私はこのhttp://jsfiddle.net/4BwGG/3/から使用したコードの機能のいくつかを持っていますが、ここに私が理解できないことがいくつかあります:

style="display: none"タグ内のプロパティを使用してテーブルの行の一部を非表示にして<tr>おり、スクリプトがすべてを解析すると、それらの非表示の行からの情報も含まれます。表示されている行だけがテキストエリアにコピーされるようにするにはどうすればよいですか?

1 行のエントリは次のようになります。

<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:\n\n';
    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);
}
4

2 に答える 2

0

の可視性をチェックする条件ステートメントでコードをラップしてみてください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:\n\n',
        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);
}
于 2012-12-31T08:38:35.267 に答える
0

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/

于 2012-12-31T09:01:45.913 に答える