CODEWITHSUNDEEP
javascriptjqueryhtml
Lester_Policarpio
Lester_Policarpio

Reputation: 3

get next cell (to the right) in a table using jquery

EDIT Sorry for the mix up I was looking for the cell to the right >.<

Hi just want to ask how to get the next cell (to the right) in the table using jquery. I tried using the alert(result) command to capture the result but it is giving me an undefined value. When getting the attribute of the div using alert(div) it is giving me the desired result.

html

<div id='tab1' class='2nd_shift'>
    <table border='1' id='table_id' style='margin: 10px' ; cellpadding='1' cellspacing='1' bordercolor='#333333' bgcolor='#C0CCD0'>
        <tr>
            <th><font size='2' face='Baskerville' id='systems' class='systems'>SYSTEMS</font></th>
            <th><font size='2' face='Baskerville' id='schedule' class='schedule'>SCHED</font></th>
            <th><font size='2' face='Baskerville' id='start_time' class='start_time'>START_TIME</font></th>
            <th><font size='2' face='Baskerville' id='end_time' class='end_time'>END_TIME</font></th>
            <th><font size='2' face='Baskerville'>DURATION</font></th>
            <th><font size='2' face='Baskerville'>DONE_BY</font></th>
            <th><font size='2' face='Baskerville'>REMARKS</font></th>
        </tr>
        <tr>
            <td><font size='2' color='red' face='Baskerville'><b>2ND SHIFT</b></font></td>
        </tr>
        <tr>
            <td><font size='1' face='Baskerville'></font></td>
            <td><font size='1' face='Baskerville'></font></td>
            <td><input type='text' style='width: 120px' font size='1' face='Baskerville' onclick='youClickStart()' class='start_time' id=''></font></td>
            <td><input type='text' style='width: 120px' font size='1' face='Baskerville' onclick='youClickEnd()' class='end_time' id=''></font></td>
            <td><font size='1' face='Baskerville'></font></td>
            <td><font size='1' face='Baskerville'></font></td>
            <td><input type='text' style='width: 120px' font size='1' face='Baskerville' class='remarks' id=''></font></td>
        </tr>
        </tr>
    </table>
</div>

Javascript

$(document).ready(function () {
    $('.remarks, .start_time, .end_time').blur(function () {
        var div = $(this).parent().closest('div').attr('class');
        var column = $(this).attr('class');
        var id = $(this).attr('id');
        var getval = $(this).val();
        $('#getdiv').val(div);
        $('#getcolumn').val(column);
        $('#getid').val(id);
        $('#getvalue').val(getval);
        /*condition*/
        if (column == 'end_time') {}
        if (column == 'start_time') {
            var result = $(this).closest('td').next().attr('.class');
            alert(result);
            alert(div);
        }
    });
});

Thanks in advance =)

Upvotes: 0

Views: 2999

Answers (2)

Anthony Grist
Anthony Grist

Reputation: 38345

There are two issues:

var result = $(this).closest('td').next().attr('.class');
  1. You're trying to get the attribute called .class - notice the dot. You want the attribute called class.
  2. The next element just has the HTML <td> so there aren't any classes on it; you'll probably get an empty string returned when you fix the first problem.

In addition to that, your HTML looks incorrect. You're creating an <input> element, but then you have a </font> tag immediately after it.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

The next column to the left is the previous element, so use .prev()

var result = $(this).closest('td').prev().attr('class');

Upvotes: 1

Related Questions