1

HTMLレポートを作成するコードがあります。

htmlテーブルを使用して結果を表示し、テーブルは並べ替え可能で、ゼブラストライプが自動的に適用されるため、Javascriptとそのすべてがインラインで埋め込まれているため、ファイルをユーザーと簡単に共有できます。

私はJavascriptをよく理解しておらず、それを行うのはすでに十分に困難でした。ただし、現在の問題は、一部のセルに大量のデータが含まれている場合があることです。ただし、これは仕様によるものであり、これに対するエレガントな解決策を見つけたいと思っています。

私が欲しいのは、テーブル内の任意のセルを押して表示を切り替えることができるJavascript関数または関数のスイートです。

言い換えれば、多くのセルの行と列を持つテーブルがあります。ユーザーが1つのセルを押すと、その内容が表示されないため、テーブルの残りの部分のサイズが変更されます。したがって、行の高さを変更するコンテンツの行が多いセルは、サイズが縮小されます。

この方法では、大きなセルが見えないため、セルを高くするデータの多くの行をはるかに簡単に比較できます。

行または列全体を非表示にするためにテーブルの外側にボタンを実装するソリューションを見つけました。入力フィールドのあるボタンを使用すると、IDを定義して、そのIDを非表示にすることができます。セルごとに異なる一意のIDを使用するのは賢明ではないと思います。もっと単純なものが必要です。

セルのonclickイベントをキャッチするグローバル関数で、セルの内容が表示を切り替えます。

私は自分の願望を何度も繰り返したことを知っていますが、これが私の願望をより明確にしたことを願っています。

編集：

これが私が最後に行った最後のコードです。うまく機能しているようです：

function tableclick(e) 
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    while(target != this && (!target.tagName || target.tagName != "TD")) target = target.parentNode;
    if( target != this) 
    {
        toggleVis(target)
    }
}

function toggleVis(obj) 
{
    if ( obj.style.fontSize != "0px" ) 
    {
        obj.style.fontSize = "0px"
    }
    else 
    {
       obj.style.fontSize = "16px"
    }
}

onclick=tableclick(event)次に、テーブルに追加するだけです。

4

2 に答える 2

1

テーブルにイベントを添付onclickし、イベントのターゲットを確認します。

table.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    while(target != this && (!target.tagName || target.tagName != "TD")) target = target.parentNode;
    if( target != this) {
        // "target" is the cell that was clicked. Do something with it.
    }
}

補足：行をゼブラストライプするためにJavaScriptは必要ありません。CSSを使用するだけです。

tr {background-color:white}
tr:nth-child(even) {background-color:black;}
于 2012-10-14T22:20:09.587 に答える
-1

あなたが学びたいと思っているなら、jQueryは行く方法です。これは、javascriptに慣れてくると、生活がはるかに楽になる優れたjavascriptフレームワークです。jQueryには、あなたが言っていることを実行する機能があります。のドキュメントを確認してくださいtoggle()。

あなたはこのようなことをするでしょう：

$('td').click(function() {
    $('td').show();
    $(this).toggle();
});

これにより、クリックしたTDの表示が「切り替え」られます。 これがフィドルです。

于 2012-10-14T22:23:23.767 に答える