javascript - multiple - Haga clic en Fila completa(conservando el clic central y ctrl+clic)

jquery selector

Question

Tengo una tabla HTML con un enlace en la primera columna. Quiero permitir que el usuario haga clic en cualquier lugar de la fila para activar ese enlace. Al mismo tiempo, me gustaría preservar el medio clic y la funcionalidad ctrl + clic de abrir una nueva pestaña / ventana. Aquí hay un ejemplo de la tabla:

<table id="row_link">
<tbody>
<tr>
<td><a href="link1.html">link</a></td>
<td>info 1</td>
</tr>
<tr>
<td><a href="link2.html">link</a></td>
<td>info 2</td>
</tr>
</tbody>
</table>

Usando jQuery, puedo permitir al usuario hacer clic izquierdo en cualquier lugar de una fila:

$("table#row_link tbody tr").click(function () {
window.location = $(this).find("a:first").attr("href");
});

Esto, por supuesto, deshabilita el medio clic estándar y la funcionalidad ctrl + clic de abrir una nueva pestaña. ¿Hay alguna manera mejor de permitir que los usuarios hagan clic en toda la fila mientras conservan el clic medio estándar y el comportamiento ctrl + clcik?

Answer 1

Aquí hay algo que debería funcionar: en lugar de usar window.location, use .click () para emular un clic en el primero dentro del elemento. Además, use un condicional para verificar CTRL + clic.

Debería verse así:

$("table#row_link tbody tr").click(function (e) {
if(e.ctrlKey) {
// Run Ctl+Click Code Here
} else {
$(this).children(''a'').eq(0).click();
}
}

¡Espero que esto ayude!

Dave Romero

Answer 2

Atacaría esto desde el lado HTML / css. Esto solía ser un problema común cuando la mayoría de los sitios usaban el diseño en tablas.

Primero, convierta los contenidos de todas las celdas de la tabla en enlaces. Si no desea que se vean como enlaces, puede usar CSS para eliminar el subrayado de las celdas "sin enlace". Pero serán enlaces, que semánticamente es lo que quieres de todos modos.

Luego, desea hacer que el enlace se expanda para llenar toda la celda. ya sabe la respuesta a esto :

td a { display: block; width: 100%; height: 100%; line-height: 100%; }

Con una tabla típica sin espacios entre las celdas, se podrá hacer clic en toda la fila. Y como esto no depende de trucos o hacks específicos del navegador, debería funcionar en todas partes.

Answer 3

Creo que el complemento de biggerlink hará lo que pidas. Aquí esta la

• article , y
• demo también.

Answer 4

Intenta colocar la a alrededor de la td y luego aplica una pantalla: bloquea el elemento CSS en la td.

Eso debería hacer que toda el área de la td se pueda hacer clic con todos los botones como un enlace "normal".

Un ejemplo es probablemente mejor:

<table id="row_link">
<tbody>
<tr>
<a href="link1.html"><td style="display: block;">link</td></a>
<td>info 1</td>
</tr>
<tr>
<a href="link2.html"><td style="display: block;">link</td></a>
<td>info 2</td>
</tr>
</tbody>
</table>

Un enfoque similar ha funcionado en el pasado para mí, aunque no fue exactamente para elementos de tabla. No probado con tablas, así que pruébalo.

Answer 5

Lamentablemente, no hay forma de simular un enlace y todo el comportamiento asociado en cada navegador. Por lo tanto, la única forma de lograr lo que desea es tener un enlace que siga al cursor alrededor del elemento <tr> ; este enlace sería invisible, así que, para el usuario, parece que está haciendo clic en <tr> pero en realidad está haciendo clic en un enlace oculto. ¡Con este método, el botón central, ctrl + clic y cualquier otro comportamiento quedan intactos!

Aquí hay una DEMO: http://jsbin.com/ufugo

Y aquí está el código:

$("table tr").each(function(){
var $link = $(''a:first'', this).clone(true),
dim = {
x: [
$(this).offset().left,
$(this).offset().left + $(this).outerWidth()
],
y: [
$(this).offset().top,
$(this).offset().top + $(this).outerHeight()
]
}
$link
.click(function(){
$(this).blur();
})
.css({
position: ''absolute'',
display: ''none'',
// Opacity:0 means it''s invisible
opacity: 0
})
.appendTo(''body'');
$(this).mouseover(function(){
$link.show();
});
$(document).mousemove(function(e){
var y = e.pageY,
x = e.pageX;
// Check to see if cursor is outside of <tr>
// If it is then hide the cloned link (display:none;)
if (x < dim.x[0] || x > dim.x[1] || y < dim.y[0] || y > dim.y[1]) {
return $link.hide();
}
$link.css({
top: e.pageY - 5,
left: e.pageX - 5
})
});
});

EDITAR:

Creé un plugin jQuery usando un enfoque ligeramente mejor que el anterior: http://james.padolsey.com/javascript/table-rows-as-clickable-anchors/

Answer 6

Podrías tomar el evento y ver su código de evento. Pero no hay una forma real de saber qué comportamiento tiene un navegador para esos eventos.

Answer 7

Puede hacer un enlace y dejar que se mueva en su evento de tr, en bide a mouveover, actualice href y posición

crear un enlace de píxel

<table id="row_link">....</table>
<a id="onepixel" style="position:absolute;z-index:1000;width:1px;height:1px;"></a>

actualizar href y posicionar con el mouse sobre

$("#row_link tr").mouseover(
function(event){
//update href
$("#onepixel").attr("href",$(this).find("a:first").attr("href"));
//update position, just move to current mouse position
$("#onepixel").css("top",event.pageY).css("left",event.pageX);
}
);

Answer 8

Tu quieres esto:

$(''table#row_link tbody tr'').mousedown( function(e){
if(e.ctrlKey || (!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){
//middle mouse button or ctrl+click
} else {
//normal left click
}
});

Esto se prueba en FF3.0.10, Chrome 1.0 e IE6. Uso el evento mousedown porque ni Firefox ni IE pasan el botón central del mouse sobre un evento .click (fn).

Answer 9

debes eliminar la etiqueta <tbody>

y simplemente use el atributo ''href'' para obtener el destino del enlace y tampoco seleccione la etiqueta ancla <a> porque eso contiene el atributo href.

$("table#row_link tbody tr a").click(function () {
window.location = $(this).attr("href");
});

o simplemente haga que el enlace abra una nueva pestaña.

Espero que eso te ayude.

Answer 10

EDITAR

Este es un problema simple que tiene una solución simple. No veo la necesidad de hacks desagradables que podrían romperse en algunos navegadores o tomar tiempo de procesamiento. Especialmente porque hay una solución CSS ordenada y fácil.

Primero aquí hay una demo

Inspirado por la solución @Nick para un problema muy similar, propongo una solución simple de css + jquery.

Primero, aquí está el mini-complemento que escribí. El complemento envolverá todas las celdas con un enlace:

jQuery.fn.linker = function(selector) {
$(this).each(function() {
var href = $(selector, this).attr(''href'');
if (href) {
var link = $(''<a href="'' + $(selector, this).attr(''href'') + ''"></a>'').css({
''text-decoration'': ''none'',
''display'': ''block'',
''padding'': ''0px'',
''color'': $(this).css(''color'')
})
$(this).children()
.css(''padding'', ''0'')
.wrapInner(link);
}
});
};

Y aquí hay un ejemplo de uso:

$(''table.collection tr'').linker(''a:first'');

Y todo el CSS que necesitas:

table.collection {
border-collapse:collapse;
}

Es tan simple como eso.

Puede usar el objeto de evento para verificar el tipo de clic del mouse. Este article está discutiendo un problema similar.

De todos modos, aquí está cómo hacerlo:

$("table#row_link tbody tr").click(function () {
if((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)){
if (!e.ctrlKey) {
// Left mouse button was clicked without ctrl
window.location = $(this).find("a:first").attr("href");
}
}
});