拖放时更改表格行的颜色

Change table row color when drag and drop

本文关键字：颜色 表格 拖放      更新时间：2023-09-26

我有5种不同的颜色：例如（1）红色、（2）橙色、（3）蓝色、（4）黄色、（5）和绿色。这些颜色只会给我的前5个数据上色。如果我将数据拖放到数字2，它必须是橙色，依此类推。。。。如何使用css或js实现它？

要给表格行上色，请尝试以下操作：

假设你有一张这样的桌子：

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

结果

从这个想法开始：

<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>
相关文章：