javascript - ドラッグ アンド ドロップ時に表の行の色を変更する

Question

私は 5 種類の色を持っています。(1)赤、(2)オレンジ、(3)青、(4)黄、(5)緑。これらの色は、上位 5 つのデータのみに色を付けます。データを2番にドラッグアンドドロップすると、オレンジ色になる必要があります.... cssまたはjsを使用して実装するにはどうすればよいですか?

Answer 1

表の行に色を付けるには、次のようにします。

次のようなテーブルがあるとします。

<table>
    <tr><td>Some text! 1</td></tr>
    <tr><td>Some text! 2</td></tr>
    <tr><td>Some text! 3</td></tr>
    <tr><td>Some text! 4</td></tr>
    <tr><td>Some text! 5</td></tr>
</table>

次に、CSS を使用してこれらの行のスタイルを設定します。

table tr:nth-child(1){ background: red;    } /* colour the first row "red" */
table tr:nth-child(2){ background: orange; } /* colour the second row "orange" */
table tr:nth-child(3){ background: blue;   } /* etc... */
table tr:nth-child(4){ background: yellow; }
table tr:nth-child(5){ background: green;  }

結果

Answer 2

次のアイデアから始めます。

<style>
    #sort-handler:hover { opacity:0.1 }
    .color {
        width: 7px;
    }
    tbody tr:nth-child(1) td.color {
        background-color: #3366CC;
    }
    tbody tr:nth-child(2) td.color {
        background-color: #DC3912;
    }
    tbody tr:nth-child(3) td.color {
        background-color: #FF9928;
    }
    tbody tr:nth-child(4) td.color {
        background-color: #0F9627;
    }
    tbody tr:nth-child(5) td.color {
        background-color: #990099;
    }
</style>

<table>
    <thead>
        .......
    </thead>

    <tbody>
        <tr>
            <td class="color"></td>
            <td><img src="arrow.gif" style="cursor:move;" class="sort-handle"
                    onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false"></td>
            <td>
                ......
            </td>
        </tr>
    </tbody>
</table>

<script>
    //Your drag and drop js
</script>