Question

我使用PHP动态创建一个表，为每列提供一个ID。我想要做的是在点击按钮触发ajax调用后更改任何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。

有人可以告诉我一些关于如何实现这一目标的想法吗？我可能做错了，或者至少是艰难的做法，但这是我能想到的唯一方法。

Answer 1

你能否像这样将数字传递给JS：

function strike(idNum){
        //Setting the classList to "inactive" removes the active class 'active'
        document.getElementById("col"+idNum).classList = "inactive";
    }

动态创建ID以使用jQuery更改类

1 个答案: