0

ASPでプロジェクトに取り組んでいますが、JavascriptやJqueryに慣れていません

行をクリックすると色が変わるコードを見つけました。

行をクリックすると表示を通常に変更し、他の行をクリックすると非表示にします。

私が今まで持っているもの

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>INFO</th> 
</tr> 
</thead> 
<tbody> 
<tr onclick="changeMe(this);"> 
    <td>INFO</td> 
            <tr class="versionRow" style ="display:none">
                <td>INFO</td>
            </tr>
</tr> 
</tbody> 
</table>

そして、色を変更するための私のスクリプト。

<script>
    var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;
    }
</script>

クリックしたときにバージョンversionRowクラスの行を表示できるようにしたいだけです。

何かアイデアや提案はありますか？ありがとうございました。

4

3 に答える 3

4

これが1つのアプローチです：

function hasClass(el, needle) {
    if (!el || !needle) {
        return false;
    }
    else {
        var classes = el.className.split(/\s+/);
        for (var i = 0, len = classes.length; i < len; i++) {
            if (classes[i] == needle) {
                return true;
            }
        }
        return false;
    }
}

function nextElementSiblingShim(el) {
    if (!el) {
        return false;
    }
    else {
        return el.nextSibling.nodeType == 1 ? el.nextSibling : nextElementSiblingShim(el.nextSibling);
    }
}

function changeMe(el) {
    if (!el) {
        return false;
    }
    else {
        var nextElem = el.nextElementSibling || nextElementSiblingShim(el);
        if (hasClass(nextElem, 'versionRow')) {
            nextElem.style.display = window.getComputedStyle(nextElem, null).display !== 'none' ? 'none' : 'table-row';
        }
    }
}

var rows = document.getElementsByClassName('changeMe');

for (var i = 0, len = rows.length; i < len; i++) {
    rows[i].onclick = function(){
        changeMe(this);
    };
}​​​​​​

ただし、これは整形式のHTMLに依存しています。質問に対する私のコメントに記載されているように、aはtr、、、および要素の有効な子にすぎません。別のの有効な子ではありません。の内部をネストすることもできますが、とを除いて内部に要素があってはなりません。そうは言っても、次のHTMLを使用すると、上記のスクリプトを機能させることができます。tabletheadtbodytfoottrtabletdtr tdth

<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>INFO</th>
        </tr>
    </thead>
    <tbody>
        <tr class="changeMe">
            <td>INFO</td>
        </tr>
        <tr class="versionRow">
            <td>INFO</td>
        </tr>
    </tbody>
</table>​​​​​​​

JSフィドルデモ。

onclick動作をマークアップから分離し、うまくいけば、将来的に物事をより保守しやすくするために、イベントハンドラーを削除したことに注意してください。また、（無効な）ネストをその親から移動しtr、兄弟として追加しました。

于 2012-11-24T22:29:47.287 に答える
1

これに伴う問題は、行内に行を追加できないことです。したがって、ブラウザ（少なくともchrome）は、このhtml部分の代わりに次のように作成します。

<tr onclick="changeMe(this);"> 
    <td>INFO</td> 
            <tr class="versionRow" style ="display:none">
                <td>INFO</td>
            </tr>
</tr>

これ：

<tr onclick="changeMe(this);"> 
    <td>INFO</td>
</tr> 
<tr class="versionRow" style ="display:none">
    <td>INFO</td>
</tr>

したがって、クラス名がversionRowの要素が1つしかない場合は、ブラウザーのようにコードを再フォーマットしても問題はありません。あなたがしなければならないのは、jqueryコードのこの行を追加することです：

$('.versionRow').css("display","block");

ただし、クリックした子のversionBlockを表示する場合は、htmlをに再フォーマットする必要があります。次のようになります。

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>INFO</th> 
</tr> 
</thead> 
<tbody> 
<tr onclick="changeMe(this);" > 
    <td>INFO</td> <td><span style="display:none;" class="versionRow" >INFO</span></td>
</tr>
</tbody> 
</table> ​​​​​​​​​​​​​​​​​​​​​​​​​​

そして、スクリプトは次のようになります。

var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        $('span.versionRow',el).css("display","block");

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;
    }​

JSFIDDLEデモ

于 2012-11-24T22:36:44.913 に答える
1

jQueryなしでこれを行ってからしばらく経ちました。これを試してください

<script>
    var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;

        // ok so you are using jquery. The above isn't at all!
        // in which case it's so simple
        el.find('.versionRow').show();
    }
</script>
于 2012-11-24T21:57:52.690 に答える