Create IDs dynamically to change class with jQuery

Question

I create a table dynamically with PHP giving each column an ID. What I want to do is change the class on ever ID after an ajax call triggered by a button click. The ajax part works fine, but on success, I am struggling on how to change the class on the selected row columns. After a button click fires off the ajax call, I want to change the class on the following elements from class='active' to class='inactive'. Of course, there could be dozens of rows.

The HTML for the table looks like this:

<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>

And the jQuery script (Not optimized AT ALL) I'm trying to get working is:

<!-- 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>

My thought process is to get the ID of the button click (var pID) which gives me the 'index' the row...ie, The ID of the button clicked is 'del4' so i strip off the 'del' part to get (pID = 4). I now know the column IDs to change are: col14, col24, col34, etc.

I'm trying to create these as a variable (ie: var c1 = 'col1' + pID) for the column IDs to use in the qJuery .removeClass and .addClass functions. Not sure if I can create a 'dynamic' variable id this way or not.

Can someone please give me some ideas on how I can accomplish this? I'm probably doing it all wrong, or at least the hard way, but its the only way I can think of to accomplish it.

Steve Byrne · Accepted Answer · 2017-08-02 02:31:17Z

1

Could you pass the number to JS like this:

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

answered Aug 2, 2017 at 2:31

Steve Byrne

1,3601 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create IDs dynamically to change class with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related