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;  }

<强> Result

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>

拖放时更改表格行颜色

2 个答案: