jquery - ocultar - Enlace de fila de la tabla HTML

ocultar tabla html

Question

¿Cuál es la mejor manera de hacer que una fila de una tabla HTML sea un enlace? Actualmente estoy usando jquery para cebra stripe las filas y también para resaltar onmouseover / off row seleccionado, así que si JavaScript es la respuesta, usa jquery.

Answer 1

Registre un controlador de eventos onclick para el elemento tr. Algo así usando jQuery:

$("tr").bind("click", function(){ 
  window.location = ''http://www.example.com/''; 
});

Answer 2

$(document).ready(function(){
   $("tr").click(function(){
      /* personally I would throw a url attribute (<tr url="http://www.hunterconcepts.com">) on the tr and pull it off on click */
      window.location = $(this).attr("url");

   });
});

Answer 3

Yo solo uso css:

<style>
table.collection {width:500px;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:0px;}
table.collection td a {text-decoration:none; display:block; padding:0px; height:100%;}
</style>
<table class="collection">
<tr>
    <td><a href="#">Linky1</a></td>
    <td><a href="#">Data1</a></td>
</tr>
<tr>
    <td><a href="#">Linky2</a></td>
    <td><a href="#">Data2</a></td>
</tr>
</table>

Answer 4

<td>
    <a href="/whatevs/whatevs">
        <div class="tdStreacher"> linkName
        </div>
    </a>
</td>

.tdStreacher{
    height: 100%;
    width: 100%;
    padding: 3px;
}

De esta forma, toda el área de cada celda actuará como un enlace, por lo tanto, toda la fila actuará como un enlace.

Answer 5

Aquí hay un plugin jQuery basado en la solución de Nick.

(function($) {
  $.fn.linkWholeRows = function() {

    // for each object
    return this.each(function() {

      // for each row
      $(this).find(''tbody tr'').each(function() {
        // get the first link''s href
        var href = $(this).find(''td > a'').attr(''href'');
        // if none found then
        if (href === undefined) {
          return true; // continue
        }

        // wrap all cells with links that do not already have a link
        $(this).children().not('':has(a)'').each(function() {
          $(this).contents().wrapAll(''<a href="'' + href + ''" />'');
        });

        // apply the row''s height to all links
        // in case that the cells'' content have different heights
        var height = $(this).children().css(''height'');
        $(this).find(''td > a'').each(function() {
          $(this).css(''height'', height);
          // do not forget to apply display:block to the links
          // via css to make it work properly
        });
      }); // each row

    }); // each object

  };
})(jQuery);

Espera que las filas sean envueltas en tbody''s. La altura se establece explícitamente, ya que la solución original de Nick no funcionó para mí en las celdas vecinas con diferentes alturas. Asegúrate de ponerle estilo a los elementos como bloques. Si desea aplicar relleno, aplíquelo a los elementos a en lugar de las celdas de la tabla:

a {
  display: block;
  padding: 0.25em 0.5em;
}
tbody td { padding: 0; }

Simplemente llame

$(''#your-table'').linkWholeRows();

Espero eso ayude. Saludos, Richard

Answer 6

No necesita jQuery si no le importa reemplazar la tabla por elementos genéricos:

<style>
    .table {
        border-collapse: collapse;
        border-spacing: 0;
        display: table;
    }
    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
    }

</style>

<section class="table">
    <a class="tr" href="#">
        <div class="td">
            A
        </div>
        <div class="td">
            B
        </div>
        <div class="td">
            C
        </div>
    </a>
</section>