Я создаю таблицу динамически с помощью PHP, присваивая каждому столбцу идентификатор. Что я хочу сделать, так это изменить класс по любому идентификатору после вызова ajax, запускаемого нажатием кнопки. Часть ajax работает нормально, но в случае успеха я изо всех сил пытаюсь изменить класс в выбранных столбцах строки. После того, как нажатие кнопки запускает вызов ajax, я хочу изменить класс для следующих элементов с class = 'active' на class = 'inactive'. Конечно, рядов могли быть десятки.
HTML для таблицы выглядит так:
<tr>
<div id='divID4'>
<td id='col14' class='active'>S-2016-000700</td>
<td id='col24' class='active'>48.0137.000</td>
<td id='col34' class='active'>SCHOELL PETER W</td>
<td id='col44' class='active'>S-2016-000700 DLQ DRINKING WATER FEE</td>
<td id='col54' align='center' class='active'>1</td>
<td id='col64' align='right' class='active' style='padding-right:22px;'> $ 2.29</td>
<td><input type='text' id='fld4' class='postData' name='S-2016-000700|48.0137.000' value='300.00' /></td>
<td><input type='button' id='del4' value='X' /></td>
</div>
И сценарий jQuery (ВООБЩЕ НЕ оптимизирован), который я пытаюсь заставить работать:
<!-- This ajax function Voids a line. Update DB and change font to strike-through -->
<script>
$(".voidData").each(function() {
$(this).click(function() {
var pID = ($(this).attr('id')); /* id */
var pName = ($(this).attr('name')); /* Assessment Code | Parcel */
// ajax call to add amounts to temp file
$.ajax({
url: "void.php",
type: "POST",
data: {id : pName},
success: function(data){
pID = pID.substr(3);
var c1 = 'col1' + pID
$('#' + c1).removeClass('active').addClass('inavctive');
var c2 = 'col2' + pID
$('#' + c2).removeClass('active').addClass('inavctive');
var c3 = 'col3' + pID
$('#' + c3).removeClass('active').addClass('inavctive');
var c4 = 'col4' + pID
$('#' + c4).removeClass('active').addClass('inavctive');
var c5 = 'col5' + pID
$('#' + c5).removeClass('active').addClass('inavctive');
var c6 = 'col6' + pID
$('#' + c6).removeClass('active').addClass('inavctive');
console.log(c1 + " -- " + c2);
},
error: function(){
console.log("ERROR");
}
});
});
});
</script>
Мой мыслительный процесс состоит в том, чтобы получить идентификатор нажатия кнопки (var pID), который дает мне «индекс» строки ... т.е. идентификатор нажатой кнопки - «del4», поэтому я убираю часть «del», чтобы получить (pID = 4). Теперь я знаю, что нужно изменить идентификаторы столбцов: col14, col24, col34 и т. Д.
Я пытаюсь создать их как переменную (например: var c1 = 'col1' + pID) для идентификаторов столбцов, которые будут использоваться в функциях qJuery .removeClass и .addClass. Не уверен, смогу ли я таким образом создать «динамический» идентификатор переменной.
Может кто-нибудь дать мне несколько идей о том, как я могу это сделать? Я, вероятно, все делаю неправильно, или, по крайней мере, жестко, но это единственный способ, который я могу придумать, чтобы добиться этого.
1 ответ
Не могли бы вы передать номер в JS вот так:
function strike(idNum){
//Setting the classList to "inactive" removes the active class 'active'
document.getElementById("col"+idNum).classList = "inactive";
}
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.