Get nearest 4 column text on hover any column in table?

Zaheer Abbas 0
Viewed 34

I am working on a reservation project if someone wants to reserve a spot for the game (Warhammer40K) 4 spots to fill in the table, for that purpose I try to get text of nearest column in which user hover.

For example, If the table has 10 columns divided into 2 rows. If I hover on spot 2, I need to get the text of the column right to column 2, which is 3, and the text of the column below column 2 such as 7 and 8.

Below is the code which helps me to get column 3 text right to column 2.

Any help will be appreciated.

jQuery(".sqr_wrapper tr td").hover(function() {
  var spot = jQuery(this).nextAll("td").first().find(".spot").text();
  console.log(spot);
});

Here is the table.

enter image description here

jquery php css html
1 Answers

I can't write the exact code for your requirement but here is a guide how you can get next, prev, up, down <td> & <tr>, You'll have to think and practice the code and will have to check the jQuery documentation as well for more useful functions.

Basically, you'll have to move between <tr> and <td> using prev() & next() and you get parent using closest() or you can use parent() function if you want. then index() will help you pick the specific position of <tr> and <td>

jQuery('.sqr_wrapper tr td').hover(function () {
    /**
     * Current <td>
     *
     * using this we get the current id element.
     */
    const current_td = jQuery(this);

    /**
     * Current <td> index
     *
     * using index() function we get the current <td> index.
     *
     * Note: index starts from 0, not from 1.
     */
    const current_td_index = current_td.index();

    /**
     * Parent <tr> of current <td>
     *
     * Using closest() function we get the parent <tr>
     */
    const current_tr = current_td.closest('tr');

    /**
     * Parent <tr> index of current <td>
     */
    const current_tr_index = current_tr.index();

    /**
     * Current <td> spot text
     */
    const current_spot = current_td.find('.spot');
    const current_spot_text = current_spot.text();

    /**
     * Previous <td> from current <td>
     *
     * Using prev() function we get the previous <td>
     */
    const prev_td = current_td.prev('td');

    /**
     * Previous <td> index from current <td>
     */
    const prev_td_index = prev_td.index();

    /**
     * Previous <tr> from Parent <tr> of current <td>
     *
     * using prev() function & current_tr element we get prev <tr>
     */
    const prev_tr = current_tr.prev('tr');

    /**
     * Previous <tr> index from Parent <tr> of current <td>
     */
    const prev_tr_index = prev_tr.index();

    /**
     * Previous <td> spot text
     */
    const prev_spot = prev_td.find('.spot');
    const prev_spot_text = prev_spot.text();

    /**
     * Next <td> from current <td>
     *
     * Using next() function we get the next <td>
     */
    const next_td = current_td.next('td');

    /**
     * Next <td> index from current <td>
     */
    const next_td_index = next_td.index();

    /**
     * Next <tr> from Parent <tr> of current <td>
     *
     * using next() function & current_tr element we get next <tr>
     */
    const next_tr = current_tr.next('tr');

    /**
     * Next <tr> index from Parent <tr> of current <td>
     */
    const next_tr_index = next_tr.index();

    /**
     * Next <td> spot text
     */
    const next_spot = next_td.find('.spot');
    const next_spot_text = next_spot.text();

    /**
     * Up <td> from current <td>
     *
     * we use prev_tr element then select <td> from using children() function
     * then we filter and grab the correct <td> using eq() function
     * by passing the current <td> index in which we are.
     */
    const up_td = prev_tr.children('td').eq(current_td_index);

    /**
     * Up <td> spot text
     */
    const up_spot = up_td.find('.spot');
    const up_spot_text = up_spot.text();

    /**
     * Down <td> from current <td>
     *
     * we use next_tr element then select <td> from using children() function
     * then we filter and grab the correct <td> using eq() function
     * by passing the current <td> index in which we are.
     */
    const down_td = next_tr.children('td').eq(current_td_index);

    /**
     * Down <td> spot text
     */
    const down_spot = down_td.find('.spot');
    const down_spot_text = down_spot.text();
});

UPDATE

Based on the above guide you can create 4 functions like this to simplify your workflow and you can pass the values in functions and move left, right, up, down

const move_right = (td) =>  td.next('td');

const move_left = (td) =>  td.prev('td');

const move_up = (td) => td.closest('tr').prev('tr').children('td').eq(td.index());

const move_down = (td) =>  td.closest('tr').next('tr').children('td').eq(td.index());

const get_spot_text = (td) => td.find('.spot').text();

So here is an example of how to use these functions:

jQuery('.sqr_wrapper tr td').hover(function () {
    const current_td = jQuery(this);

    // get text from 2 step next block
    get_spot_text(move_right(move_right(current_td)));

    // get text from 2 steps down block
    get_spot_text(move_down(move_down(current_td)));

    // get text from 1 step up and 2 step right
    get_spot_text(move_right(move_right(move_up(current_td))));

    // get text from 2 steps down and 1 step left

    get_spot_text(move_left(move_down(move_down(current_td))));
});

Note: I have not tested the updated code, if you find problem using the updated code please let me know

Vijay Hardaha0
Related