Как изменить элемент таблицы HTML <td>, используя JQuery - PullRequest
Новая
       15

Как изменить элемент таблицы HTML <td>, используя JQuery

0 голосов
/ 06 июля 2019

Я пытаюсь создать расписание веб-приложений. Для этого я использую элемент таблицы 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

Ответы [ 3 ]

0 голосов
/ 06 июля 2019

Вы можете добавить класс (например, highlight) с соответствующим стилем к тд, которые нужно выделять, а не делать это для каждого идентификатора ячейки.

Но если атрибут 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>
0 голосов
/ 06 июля 2019

Спасибо всем за помощь. Я обнаружил, что причина, по которой он не работает, заключается в том, что селектору не нравится «:», когда я от него избавился, тогда он работал. Мой код теперь с идентификатором «r1t_1100», а не «r1t11: 00». 

 $(document).ready(function () {
        $("#r1t_1100").replaceWith("<td bgcolor='#FF0000' id='r1t_1100'></td>");     
    });
0 голосов
/ 06 июля 2019

Вы можете использовать свойство css. 

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

РЕДАКТИРОВАТЬ: Если вы обычно хотите изменить атрибут, вы можете использовать метод attr() вместо: 

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