我使用 PHP 动态创建一个表,为每列提供一个 ID。我想要做的是在单击按钮触发 ajax 调用后更改 ever ID 上的类。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>
我的思考过程是获取按钮单击的 ID (var pID),它为我提供了“索引”行...即,单击的按钮的 ID 是“del4”,因此我将“del”部分去掉得到(pID = 4)。我现在知道要更改的列 ID 是:col14、col24、col34 等。
我正在尝试将这些创建为变量(即:var c1 = 'col1' + pID),以便在 qJuery .removeClass 和 .addClass 函数中使用列 ID。不确定我是否可以通过这种方式创建“动态”变量 ID。
有人可以给我一些关于如何实现这一目标的想法吗?我可能都做错了,或者至少是艰难的方式,但这是我能想到的唯一方法来完成它。
你能不能像这样将数字传递给 JS:
function strike(idNum){
//Setting the classList to "inactive" removes the active class 'active'
document.getElementById("col"+idNum).classList = "inactive";
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句