Search code examples
javascripthtmlonblur

How to call method on adjacent cell with onblur?

I'm trying to add validation to a table where users will enter data. The information I'm trying to collect is shift times, where there can be no gaps in shift starts and ends (Ex. 3:59, 4:00 is what I'm looking for). When the user edits a shift time, I want to be able to look at adjacent cells and adjust that cells time automatically.

So if Second shift start time changes from 14:00 to 13:00, I should look at both Second shift end time, and First shift end time and adjust those times accordingly and continue looking until no more changes are made.

Is there a way to call a method on an adjacent cell?

This is written in HTML, Classic ASP and Javascript.

<table border='1' style='border-collapse:collapse;'>
    <tr>
        <th>Name</th>
        <th>Start</th>
        <th>End</th>
    </tr>
    <tr>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl0Name' Value='First' onBlur='updateGrid("Name", cntl0Name, "0", "First", "06:00", "13:59", 1);'></td>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl0Start' Value='06:00' onBlur='updateGrid("Start", cntl0Start, "0", "First", "06:00", "13:59", 1);'></td>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl0End' Value='13:59' onBlur='updateGrid("End", cntl0End, "0", "First", "06:00", "13:59", 1);'></td>
    </tr>
    <tr>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl1Name' Value='Second' onBlur='updateGrid("Name", cntl1Name, "1", "Second", "14:00", "21:59", 1);'></td>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl1Start' Value='14:00' onBlur='updateGrid("Start", cntl1Start, "1", "Second", "14:00", "21:59", 1);'></td>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl1End' Value='21:59' onBlur='updateGrid("End", cntl1End, "1", "Second", "14:00", "21:59", 1);'></td>
    </tr>
    <tr>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl2Name' Value='Third' onBlur='updateGrid("Name", cntl2Name, "2", "Third", "22:00", "05:59", 1);'></td>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl2Start' Value='22:00' onBlur='updateGrid("Start", cntl2Start, "2", "Third", "22:00", "05:59", 1);'></td>
        <td style='width: auto;'><Input style='border-style:none; width: auto;' Type='Text' Name='cntl2End' Value='05:59' onBlur='updateGrid("End", cntl2End, "2", "Third", "22:00", "05:59", 1);'></td>
    </tr>
</table>

Solution

  • Yes, you can use previousSibling and nextSibling DOM property to access the adjacent cell.

    this.previousSibling.value will give you previous cell value and this.nextSibling.value will give you next cell value.