CODEWITHSUNDEEP
javascriptjquery
Ricardo Binns
Ricardo Binns

Reputation: 3246

Get the closest class from a list jquery

It's hard to explain, so I created an example:

jsfiddle

My idea is to change the color of each column when the respective input is in action...

If anyone has a better idea to do this - please let me know!

When I focus the input, I need the current class of the column.

Because if I get the class, then I can manipulate anything with this class.

the code is here:

$(".inputTest").focusin(function(){
    var class = $(this).closest('.tableList')
                    .children().children().children('.auxClass')
                    .attr('class')
                    .split(' ')[0];
                alert(class);
});

This is the main code, I try alot of stuffs to get, but nothing.

Thanks

Upvotes: 0

Views: 753

Answers (3)

clairesuzy
clairesuzy

Reputation: 27624

As mentioned in other answers your inputs are not actually in the same "columns" as your red/blue bordered tables, but you can make it so they are using the <col> element on the main table, then using the index value you can match your inputs to their column

Working Example

HTML - the only addition is the two <col> elements at the start

<table width="100%" border="1" class='tableList'>
<col span="2" class="left">
<col span="2" class="right">

    <tr>
        <td class="101 auxClass" width="261px" colspan="2" style="border: solid red;">
            <table border="1" cellspacing="1" cellpadding="1" width="100%" height="70px">
                <tbody>
                    <tr>
                        <td colspan="2">Something</td>
                    </tr>
                    <tr>
                        <td width="78px">Something 2</td>
                        <td>Total</td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td class="102" width="261px" colspan="2" style="border: solid blue;">
            <table border="1" cellspacing="1" cellpadding="1" width="100%" height="70px">
                <tbody>
                    <tr>
                        <td colspan="2">
                       Something 3
                        </td>
                    </tr>
                    <tr>
                        <td width="78px">Something 4</td>
                        <td width="75px">Total 2</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
    <tr>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
        <td>Result</td>
        <td><input type="text" class="inputTest"/></td>
    </tr>
</table>

CSS:

col.current {background: #eee;}

jQuery

$(".inputTest").focusin(function(){
    var colidx = $(this).closest('td').index();


     if (colidx == 1) {
          $("col").removeClass('current');
          $("col.left").addClass('current');
     }  else if (colidx == 3) {
          $("col").removeClass('current');   
          $("col.right").addClass('current');
     }

});

Your main table is actually 4 columns, and you need to split it into two halfs of two columns each with the input being in the second column of each half

The jQuery is finding the index of the parent td of the input - there are four columns in the main table so the index of a td will either be 0,1,2 or 3 - and the input is either going to be in cell index 1 or cell index 3. When it finds out which one it add a class to the relevant col element to which you can add a background highlight..

Note though that the CSS you can apply to a col element is limited, see: http://www.quirksmode.org/css/columns.html , for the options so it would depend what you want to do

however I think from this you could probably target td index 0 & 1, or td index 2 & 3 if needed

Upvotes: 0

Andomar
Andomar

Reputation: 238086

First I'd add an outer table to split the page in a left and a right hand side. That way, the inputs below the red border and the inputs below the blue border each have their own table.

Then you can search for the first td below the closest table:

$(".inputTest").focusin(function(){
    var class = $(this).closest('table').find('td:eq(0)').attr('class');
    alert(class);
});

Click for working jsfiddle example.

Upvotes: 1

Mick Hansen
Mick Hansen

Reputation: 2694

Try this:

$(".inputTest").focus(function(){
    var class = $(this).closest('table').parent().attr('class');
    alert(class);
});

Edit: Oh, i just realised your inputs are not inside your tables, i think you're gonna have a hard time matching them up to the table/column they're under then. You'd need to add a common attribute to identify them by.

Upvotes: 0

Related Questions