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>