Truncar el valor de la celda con jQuery

Tengo una mesa que tiene 100% de ancho. Se genera dinámicamente con valores de mi db. Necesito truncar TH valores si no encajan en la tabla, sin sobrepasar los límites de la celda. Si el valor está truncado, me gustaría agregar un enlace con ... y coloque la etiqueta de longitud completa en la etiqueta del título. No necesito que se expanda. Algo como esto:

<th>
   Long label<a href="javascript:void(0)" title="$myFullValue">...</a>
</th>

No estoy seguro de cómo obtener el valor de la cadena ...

$("TH").width();
$("TH").val().width(); ??

Sé que hay algunos complementos de jQuery, pero no pude encontrar lo que necesitaba y pensé que podría intentar darle mi propio giro a este proyecto.

http://jsfiddle.net/b3cQZ/3/


EDIT:

Solo una idea que cruzó por mi mente. ¿No podría envolver la etiqueta en etiquetas y obtener su ancho? Al mismo tiempo, obtenga el ancho del padre TH. Si el ancho de labe es mayor, podría

  1. restar, digamos 20 px (para ...) del ancho TH y,
  2. asignar ese ancho al ancho del tramo
  3. mientras agrega desbordamiento: oculto,
  4. agregando "..." al intervalo

¿No funcionará esto?

preguntado el 16 de mayo de 11 a las 16:05

santa ... por favor en el futuro intente preparar al menos un JSfiddle o JSbin -

@roXon esto no siempre es necesario. -

La mesa de la demostración no es 100% ancha ... -

@ Šime Vidas Solo quería que fuera lo suficientemente corto para que la etiqueta larga empujara. -

5 Respuestas

Esta solución utiliza un valor fijo, pero si puede encontrar una manera de calcular el maxLength podrías envolver esto en un function y pasarlo la salida como el maxLength.

VIOLÍN http://jsfiddle.net/m72Ja/2/

HTML

<table class="MyTable" border="1" width="400">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Long Long Long Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

JS

$(document).ready(function() {
    $('.MyTable th').each(function() {
        var maxLength = 10;
        //if the value is greater than max length,      
        //cut the string to max length then add ...     
        if ($(this).text().length > maxLength) {
            $(this).text($(this).text().substring(0, maxLength));
            $(this).append($("<a href='javascript:void(0);' title='$myFullValue'>...</a>"));
        }
    });
});

contestado el 16 de mayo de 11 a las 21:05

La tabla tiene un ancho del 100% (no en el violín del OP, sino en la pregunta en sí), y el problema es que se desconoce la cantidad de caracteres que se mostrarán. - Carreras de ligereza en órbita

Sí, lo veo ahora, @Tomalak. Es por eso que edité esta respuesta hace algún tiempo para describir que requería una longitud fija. En este punto, solo muestra cómo haría para truncar el valor y agregar el <a>... - pixelbobby

$("TH").width(); Está destinado a tomar la dimensión de ancho real del elemento, no la longitud del texto. Para eso, use el atributo tradicional js "length": $("TH").text().length; En general, lo que está tratando de hacer es bueno y no tan difícil de hacer por su cuenta. Por lo general, hago que el lado del servidor configure los enlaces y el texto que necesito truncar, ya que ya conoce la longitud y todo, pero si está renderizando en el lado del cliente, está bien hacerlo allí. Envuelva lo que desea ocultar en un elemento "span" con una clase css como "none" .none{display:none;} de esa manera, todo lo que necesita que haga el controlador es agregar o eliminar la clase según corresponda.

contestado el 16 de mayo de 11 a las 21:05

¿Cómo puedes hacerlo en el lado del servidor? No sabe qué tan ancho será el elemento contenedor. - Carreras de ligereza en órbita

Este es un ejemplo simplista basado estrictamente en el número de caracteres de la celda. No sería necesario si hubiera una línea larga de texto con espacios porque lo más probable es que el texto se ajuste.

$("TH").each(function(){//loop over cells
  var that = $(this);//placeholder for cell
   if(that.html().length > [some value]){//test length of html
     var span = $("<span />");//create span
     span.html(that.html().substring(0, [some value]));//set html of span
     span.attr("title", that.html());//add title
     that.empty();//empty cell
     that.append(span);//add span to cell
  }
});

contestado el 16 de mayo de 11 a las 21:05

¿Es [algún valor] un ancho en varios caracteres o un ancho en px? - de santa

@ santa- @tomalak [algún valor] sería simplemente un marcador de posición para la longitud máxima de caracteres que desea permitir en una celda. ¡Gracias en @ roX0n! - ek_ny

El problema es que thEl ancho de 'se expandirá hasta que haga el truncamiento, y no podrá hacer el truncamiento hasta que sepa el ancho que desea. th ser.

Sugiero dar el th el estilo overflow: hidden para que no se expanda. Luego ponga el texto dentro de un <span> (o posiblemente un div).

A continuación, puede utilizar $('th').width() y compare con el ancho de su texto div. Cómo se determina un lugar apropiado para truncar la cadena:

  • (si usa una fuente monoespaciada) ahora es realmente fácil
  • (si usa una fuente de ancho variable) puede requerir cortar caracteres iterativamente hasta que el div encaja en el th. ¡Sí!

contestado el 16 de mayo de 11 a las 21:05

Meh, las mesas tienden a expandirse y rellenarse solas. No estoy realmente seguro de que este enfoque funcione ahora. - Carreras de ligereza en órbita

contestado el 16 de mayo de 11 a las 21:05

Sí, he visto algunos que utilizan las funciones de CSS3. El problema es que aún no se ha lanzado oficialmente y, por lo tanto, no tiene que ser compatible con los navegadores. Gracias por el enlace. - de santa

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.