How to add/insert json data[0] etc to/in jquery $('td').css?


Tags: jquery,css,ajax,json

Problem :

Here is working code

$('td.transaction_partner_name_td4').css('border-bottom', '1px solid #FF0000');

It changes border color for such html <td class='transaction_partner_name_td4'></td>

But I need to use html like this

<td class='transaction_partner_name_td<?php echo $row_number;?>'>
<input type='text' name='transaction_partner_name[]' id='transaction_partner_name<?php echo $row_number;?>'>
</td>

$row_number may be 1, 2 ... 30. So transaction_partner_name_td may be transaction_partner_name_td1,2...30

Need in ajax after function(data, success) change <td class='transaction_partner_name_td<?php echo $row_number;?>'> for certain td

json data values are for example :

data[0] value is 1

data[1] value is 3

data[2] value is 4

I can change/set input value like this:

<?php while ( $counter < ($counter_maximum) ){ ?>
$('#transaction_partner_name<?php echo $counter;?>').val(data[<?php echo $counter;?>]);
<?php $counter++; } ?>

In the same way trying to change/set border color.

Tried

<?php while ( $counter < ($counter_maximum) ){ ?>
$('td.transaction_partner_name_td(data[<?php echo $counter;?>])').css('border-bottom', '1px solid #FF0000');
<?php $counter++; } ?>

But this does not work. With View source see like this $('td.transaction_partner_name_td(data[1])').css('border-bottom', '1px solid #FF0000');

Is it possible to add json data[0] to td.transaction_partner_name_td? Or may be other solution?

Solution

Thanks to T.J. Crowder advice at the moment get to work with this code (possibly latter will face some problems, but at the moment works as necessary):

<?php while ( $counter < ($counter_maximum) ){ ?>
$("#transaction_partner_name" + data[<?php echo $counter;?>]).closest("td.transaction_partner_name_td").css('border-bottom', '1px solid #FF0000');
<?php $counter++; } ?>


Solution :

I think there's probably a better way to approach this structure entirely, but the minimal change to what you have that allows you to target those cells is this:

HTML (Note that there's no longer a row ID on the class):

<td class='transaction_partner_name_td'>
   <input type='text' 
          name='transaction_partner_name[]' 
          id='transaction_partner_name<?php echo $row_number;?>'>
</td>

JavaScript:

// Access *all* of them
var allTransationPartnerCells = $("td.vtransaction_partner_name_td");

// Or access the one for a specific row
var justOneCell = $("#transaction_partner_name" + someRowNumber)
                                  .closest("td.transaction_partner_name_td");

Or in that last one, you probably don't even need the class:

// Access the one for a specific row
var justOneCell = $("#transaction_partner_name" + someRowNumber)
                                  .closest("td");

    CSS Howto..

    How to create a perfect 3 columns layout using CSS , with cross-browser support?

    How can I handle XML namespaces in CSS Selectors or in jQuery?

    How to to select the last class or last of type in css

    Javascript: How do I get the id of a clicked link and then style it in css

    How do I correctly position elements and lay out a page?

    How to set image height 90 % of whole page height (not viewport)

    How to make input and select to be same width in css

    How can I target and except for the first and last ?

    How to set background color with opacity by css?

    How can one fix a CSS3 graident background when using a box for content?

    How to keep the aspect ratio of the image in css?

    How to center child divs along each side of a parent div

    how to get value from this html date-ranger?

    how to creating a separator line which is always in the middle (center)

    How to call single dropdown to every element using jquery

    Responsive Design - Toggle a Div's Visibility - how to integrate javascript with css @media

    How to not display common border between two adjacent divs?

    how to align vertically a dynamic-height div inside another fixed height div

    How do I continue to allow the user to click until a certain point?

    How to give line-break from css, without using
    ?

    How can I create CSS styles dynamically?

    How to select li child of a ul without nth-child via css?

    Beginner's stuff: How to stop CSS' Divs from overlapping?

    How to convert css long to css one line style with Notepad++

    How to remove line in the middle? [duplicate]

    How to hide specific TD borders in a TABLE using CSS

    How do I make these buttons stay activated after clicking on them?

    How to make this div using html and css?

    How to make carousel have a max width, and load without resize

    How to override CSS to change of bootstrap