时间戳

首页 > 解决方案 > 如何使用 JQuery 更改 HTML 表格元素

jquery - 如何使用 JQuery 更改 HTML 表格元素

问题描述

我正在尝试创建一个网络应用程序时间表。为此，我使用表格 HTML 元素来显示当天的日程安排。数据来自 asp.net API，它为其提供了开始时间和结束时间。我需要 jQuery 接收数据以将表格单元格转换为红色，以显示有一项任务需要按计划完成。现在，我只是想让 JQuery 更改表格中一个单元格的背景颜色，但是，当我运行网站时，什么也没有发生。

我使用了 jQuery append()、replaceWith() 和 replaceAll() 方法。然后我在表格单元格上添加了“contenteditable”。

<table border="1">
<tr>
    <th>Student</th>
    <th>8:00am</th>
    <th>8:30am</th>
    <th>9:00am</th>
    <th>9:30am</th>
    <th>10:00am</th>
    <th>10:30am</th>
    <th>11:00am</th>
    <th>11:30am</th>
    <th>12:00pm</th>
    <th>12:30pm</th>
    <th>1:00pm</th>
    <th>1:30pm</th>
    <th>2:00pm</th>
    <th>2:30pm</th>
    <th>3:00pm</th>
    <th>3:30pm</th>
    <th>4:00pm</th>
    <th>4:30pm</th>
    <th>5:00pm</th>
    <th>5:30pm</th>
    <th>6:00pm</th>
</tr>

<tr>
    <td>&nbsp;</td>       
    <td id="r1t8:00"></td>
    <td id="r1t8:30"></td>
    <td id="r1t9:00"></td>
    <td id="r1t9:30"></td>
    <td id="r1t10:00"></td>
    <td id="r1t10:30"></td>
    <td contenteditable id='r1t11:00'></td>
    <td id="r1t11:30"></td>
    <td id="r1t12:00"></td>
    <td id="r1t12:30"></td>
    <td id="r1t1:00"></td>
    <td id="r1t1:30"></td>
    <td id="r1t2:00"></td>
    <td id="r1t2:30"></td>
    <td id="r1t3:00"></td>
    <td id="r1t3:30"></td>
    <td id="r1t4:00"></td>
    <td id="r1t4:30"></td>
    <td id="r1t5:00"></td>
    <td id="r1t5:30"></td>
    <td id="r1t6:00"></td>
</tr>

</table>


@section scripts
{
    <script>

        $(document).ready(function () {
            $('#r1t11:00').replaceWith('<td id="r1t6:00" bgcolor="#FF0000"></td>');
        });

这就是我得到的截图

我应该得到这个截图 2

标签： jqueryhtmlhtml-table

解决方案

您可以使用该css物业。

$(document).ready(function () {
    $('#r1t11:00').css('background-color','#FF0000');
});

编辑：如果您通常要更改属性，则可以改用该attr()方法：

$(document).ready(function () {
    $('#r1t11:00').attr('rowspan','2');
});

推荐阅读