¿Cuál es la forma más estándar y compatible de convertir una fila de una tabla completa en un enlace?

Obviamente, no puede simplemente rodear la etiqueta <tr> con una etiqueta <a> y llamarla un día; esto no es válido y ni siquiera funciona. He visto usar JavaScript, pero ¿qué ocurre con los navegadores que no son compatibles con JavaScript? ¿Cuál es la mejor manera de hacer una fila de tabla completa <tr> en un enlace?¿Cuál es la forma más estándar y compatible de convertir una fila de una tabla completa en un enlace?

Editar: A petición de Lerxst, aquí es un ejemplo de una tabla con algunas filas:

<table> 
    <thead> 
     <tr><th>Name</th><th>Number of widgets</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>Bob Smith</td><td>Three</td></tr> 
     <tr><td>Chuck Norris</td><td>Infinity+1</td></tr> 
    </tbody> 
</table>

Fuente

2010-05-20 Ricket

Se puede publicar un ejemplo de su fila de la tabla? –

Mi opinión personal, y sé que la mayoría no estará de acuerdo, es usar Javascript. Los navegadores y las personas que no admiten Javascript son increíblemente pequeños y les falta gran parte de Internet. Otra forma que es posible, es recrear el marco de tablas usando divs y tener un acto de anclaje como tr (bloque de visualización) –

No estoy en desacuerdo. Hoy en día es una tontería preocuparse por eso tanto como lo hacen la mayoría de los web-heads doctrinarios. Con los atributos de accesibilidad modernos admitidos en HTML5, realmente ni siquiera tiene que preocuparse por eso: el soporte de accesibilidad en realidad puede ser * mejor *. – Pointy

Mi preferencia sería poner un enlace en la célula más lógica para ello (probablemente el nombre), a continuación, agregar un controlador de eventos a lo largo de las líneas de:

clientes

tr.onclick = function (e) { 
    location.href = this.getElementsByTagName('a')[0].href; 
}

no JS haría todavía podrá usar el enlace regular.

Más eficientemente, conecte el controlador de eventos a la tabla y use el objeto de evento para encontrar el elemento con un clic y luego suba al árbol de los padres hasta que toque una fila. Probablemente esto se logre mejor con una biblioteca como YUI o jQuery.

Fuente

2010-05-20 17:44:44 Quentin

LINK

casi le da la apariencia de tener el acto fila como un enlace Al hacer que CSS cambie los colores a los enlaces represivos y cree en el mouse los eventos de clic que reaccionan y redirigen al cambio apropiado, el enlace explica cómo hacer eso

la alternativa podría ser agregar un enlace de etiqueta al código si JS no está disponible, de esa manera las personas sin JS todavía pueden usar el enlace incluido en la fila. por lo que tiene una opción alternativa

Fuente

2010-05-20 17:32:50

Él pidió hacerlo sin Javascript. – Pointy

Sin soporte de Javascript, simplemente no puede. Un enlace es un enlace y una fila de la tabla es una fila de la tabla (es decir, <a> es <a> y <tr> es <tr>). Las filas de la tabla y la mayoría de los demás elementos de marcado no tienen un comportamiento de enlace "natural". Lo mejor que puede hacer es llenar todas las celdas de su tabla con etiquetas <a> alrededor del contenido. editar: Tenga en cuenta que desea modificar los estilos para que las etiquetas <a> se distribuyan de forma que llenen por completo las celdas de la tabla; tal vez hacerlos display: block para empezar.

O podría usar Javascript.

Fuente

2010-05-20 17:33:08 Pointy

El problema al poner un enlace en * cada * celda es que los usuarios que no son punteros deben pasar por varias copias de lo que son (esencialmente) el mismo enlace. Es una experiencia horrible. – Quentin

Estoy completamente de acuerdo. Por supuesto, los navegadores de teclado también lo tendrán complicado con una solución de Javascript, a menos que se puedan agregar algunos atributos ARIA al ''. Sin embargo, no sé lo suficiente sobre eso. (Oh, mirando tu solución, veo a qué te refieres) – Pointy

<html><head> 
    <style type="text/css"> 
    table a { display: block; } 
    table a:hover { background: yellow; } 
    .name { display: block; float: left; width: 300px; } 
    </style> 

</head><body> 
     <table> 
     <thead> 
      <tr><th class="name">Name</th><th>Number of widgets</th></tr> 
     </thead> 
     <tbody> 
      <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr> 
      <tr><td colspan="2"><a href="#"><span class="name">Bob Smith</span>Three</a></td></tr> 
     </tbody> 
    </table> 

</body></html>

Fuente

2010-05-20 17:34:14 Riley

¿Tabla en la tabla solo para el enlace? No creo que sea una buena idea. – prostynick

HTML totalmente inválido para poner una tabla dentro de una etiqueta ''. (* edit: * excepto en HTML5, pero no sé si IE6 le gustaría) – Pointy

Solo intento proporcionar soluciones viables a la pareja. Él no quiere ejemplos de JavaScript. :) @prostynick Hay algunos "No creo que sea una buena idea" en esta pregunta. – Riley

Si usted está dispuesto a renunciar a la mesa, a continuación la solución es la más sencilla y no requiere de JavaScript:

<style type="text/css"> 
.table { 
    border-collapse:collapse; 
    border-spacing:0; 
    display:table; 
} 
.table .row { 
    display:table-row; 
} 
.table .cell { 
    display:table-cell; 
}  
</style> 

<section class="table"> 
    <a class="row" href="#"> 
    <div class="cell"> 
     A 
    </div> 
    <div class="cell"> 
     B 
    </div> 
    <div class="cell"> 
     C 
    </div> 
    </a> 
</section>

Fuente

2012-08-13 10:36:38

¿Cuál es la forma más estándar y compatible de convertir una fila de una tabla completa en un enlace?

Respuesta

Cuestiones relacionadas