如何使用 JQuery 更改 HTML 表格 <td> 元素答案

【问题标题】：How to alter the HTML table <td> element using JQuery如何使用 JQuery 更改 HTML 表格 <td> 元素
【发布时间】：2019-07-07 05:00:59
【问题描述】：

我正在尝试创建网络应用计划。为此，我使用表格 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>');
        });

这就是我得到的Screenshot

我应该得到这个Screenshot 2

【问题讨论】：

bgcolor 不是有效的 HTML 属性。试试style="background-color:#FF0000;"

标签： jquery html html-table

【解决方案1】：

您可以使用css 属性。

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

编辑：如果你通常想改变一个属性，你可以使用attr() 方法来代替：

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

【讨论】：

【解决方案2】：

您可以将具有适当样式的类（例如：突出显示）添加到需要突出显示的 td 中，而不是在每个单元格 id 上进行。

但是如果 contenteditable 属性存在于所有可编辑的单元格实例中 - 然后您可以使用 css 中的属性选择器来设置类 - 不需要 JS。

table {
border-collapse: collapse;
}

td[contenteditable] {
 background: #FF0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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 contenteditable 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>

【讨论】：

【解决方案3】：

感谢大家的帮助。我发现它不起作用的原因是选择器似乎不喜欢“：”，当我摆脱它时，它就起作用了。我的代码现在的 id 为“r1t_1100”而不是“r1t11:00”。

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

【讨论】：