Jquery Traversing - Select "Surroundings"

Question

Jquery Traversing - Select "Surroundings"

Navigation

#1 by (4 votes)
#2 by (2 votes)

0

Good morning. I want from .elemento_seleccionado :

<table border="1">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Iz/Ar</td>
            <td class='arriba'>Arriba</td>
            <td>De/Ar</td>
        </tr>                                                   
        <tr>
            <td>Izquierda</td>
            <td class='elemento_seleccionado>Seleccion</td>
            <td>Derecha</td>
        </tr>
        <tr>
            <td>Iz/Aba</td>
            <td>Abajo</td>
            <td>De/Aba</td>
        </tr>                       
    </tbody>
</table>

Being able to select your:

Element Top

Element Below

Diagonals

For now I was able to make the selection of:

Left

$ (". element_selected"). prev (). css ("background", "cyan");

Right

$ (". element_selected"). next (). css ("background", "orange");

jquery

asked by Alex Hunter 03.01.2018 в 21:13

source

2 answers

4

You can remove the cells from the current row and obtain the index of the selected cell through the index method. From there you can calculate the indices of the cells to be selected in the previous and next rows.

This example selects the cells around the cell that you click on:

$(function(){
  $('td').click(function(){
    $('td').css('backgroundColor', 'white');
    var $selected= $(this);
    var index = $selected.parent().find('td').index($selected);
    
    $selected.css('backgroundColor', 'blue');
    $selected.prev().css('backgroundColor', 'green');
    $selected.next().css('backgroundColor', 'green');
    $selected.parent().prev()
    .find('td:eq(' + Math.max(index-1, 0) + ')'
      + ', td:eq(' + index + ')'
      + ', td:eq(' + (index + 1) + ')')
    .css('backgroundColor', 'green');
    $selected.parent().next()
    .find('td:eq(' + Math.max(index-1, 0) + ')'
      + ', td:eq(' + index + ')'
      + ', td:eq(' + (index + 1) + ')')
    .css('backgroundColor', 'green');
  });
});

td{
  border: solid 1px #666666;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

answered by 03.01.2018 в 21:40

How to show matrix top right triangular java alternatives to SESSION and COOKIE?

score 2 · Accepted Answer

In the following way you can select all the positions, delete the ones you do not need:

EDITED

For you to make the selection no matter how many columns or rows you have

var index = $(".elemento_seleccionado").parent().find('td').index($(".elemento_seleccionado"));

$(".elemento_seleccionado").parent().prev().find("td:eq("+(index-1)+")").css("background","cyan");//Iz/Ar
$(".elemento_seleccionado").parent().prev().find("td:eq("+index+")").css("background","cyan");//Arriba
$(".elemento_seleccionado").parent().prev().find("td:eq("+(index+1)+")").css("background","cyan");//	De/Ar
$(".elemento_seleccionado").prev().css("background","cyan");//Izquierda
$(".elemento_seleccionado").next().css("background","cyan");//Derecha
$(".elemento_seleccionado").parent().next().find("td:eq("+(index-1)+")").css("background","cyan");//Iz/Aba	
$(".elemento_seleccionado").parent().next().find("td:eq("+index+")").css("background","cyan");//Abajo	
$(".elemento_seleccionado").parent().next().find("td:eq("+(index+1)+")").css("background","cyan");//De/Aba

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table border="1">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>x</td>
            <td>Iz/Ar</td>
            <td class='arriba'>Arriba</td>
            <td>De/Ar</td>
            <td>x</td>
            <td>x</td>
        </tr>                                                   
        <tr>
            <td>x</td>
            <td>Izquierda</td>
            <td class='elemento_seleccionado'>Seleccion</td>
            <td>Derecha</td>
            <td>x</td>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
            <td>Iz/Aba</td>
            <td>Abajo</td>
            <td>De/Aba</td>
            <td>x</td>
            <td>x</td>
        </tr>                       
    </tbody>
</table>