¿Por qué no es trabajo $(this).parents("tr").find("td:eq(2)").html()

I cant costura para obtener el texto «getthis» en relación a la td tr que llamó

<table>

    <tr>
        <td>1</td>
        <td>getthis</td>
        <td onclick="$(this).parents("tr").find("td:eq(2)").html()">4</td>
        <td>5</td>
    </tr>

    <tr>
        <td>1</td>
        <td>getthis</td>
        <td onclick="$(this).parents("tr").find("td:eq(2)").html()">4</td>
        <td>5</td>
    </tr>

        <tr>
        <td>1</td>
        <td>getthis</td>
        <td onclick="$(this).parents("tr").find("td:eq(2)").html()">4</td>
        <td>5</td>
    </tr>

    <tr>
        <td>1</td>
        <td>getthis</td>
        <td onclick="$(this).parents("tr").find("td:eq(2)").html()">4</td>
        <td>5</td>
    </tr>   

</table>
  • por favor, por favor, por favor, poner el código en un .Archivo JS y se unen sobre la marcha, y no con un montón de repetirse en línea de controladores de eventos…
  • El código que se ejecuta sólo devuelve una cadena, no hacer nada con ella, así que no estoy seguro de lo que usted espera que suceda.
InformationsquelleAutor Hello-World | 2012-06-28

6 Comentarios

  1. 10

    Usted está usando comillas dobles demasiado. A la hora de crear una cadena de texto en línea, usted accidentalmente termina el onclick atributo. También, eq es cero indexado, por lo que desea 1 lugar.

    Mejor (pero sólo porque no funciona):

    <td onclick="$(this).parents('tr').find('td:eq(1)').html()">4</td>

    Mejor:

    $("table").on("click", "td:nth-child(2)", function(e) {
        $(this).prev().html();  //Get the previous sibling's HTML without inline JS
    });
    • y que citando el problema es (una de las razones por qué usted nunca debe utilizar en línea de controladores de eventos si se puede evitar…
    • estrictamente hablando, su «mejor» probablemente no lo es. Al aplicar el mismo controlador de múltiples elementos que son todos los descendientes de otro, en mi humilde opinión «mejor» sería un único controlador en el padre.
    • Sí, probablemente. A mi punto original fue no uso en línea de los manipuladores, pero he actualizado a la necesidad de incorporar la delegación.
    • Hey whadda usted sabe – se ve casi como el mío ahora 😉 Ah, y por CIERTO, :nth-child es preferible :eq porque el primero es el estándar CSS3 y por lo tanto funciona en node.querySelectorAll. El último es una extensión de jQuery que obliga a que el usuario de la Chispa del motor. Consulte api.jquery.com/eq-selector
  2. 2

    Su problema real es que el uso de las comillas dobles para delimitar su onclick, pero también en el de jQuery. Debe ser:

     onclick="$(this).parents('tr').find('td:eq(1)').html()"

    Pero aún mejor: Sólo tiene que utilizar prev() JQuery Doc

    $(this).parents("tr").find("td:eq(2)").html()

    sería

    $(this).prev().html();

    Dgla poner estos haga clic en-los controladores en una función separada ( aunque es posible que de lo contrario, puede que desee utilizar una clase (por ejemplo,click) para abordar el acuerdo td):

    $('table').on('click', 'td.click', function() {
        alert($(this).prev().html());
    });
  3. 2

    Usted debe reemplazar sus repetidos en línea de controladores de eventos (que son propensos a errores, y pasado de moda) con un único y pequeño basura de código en un <script> bloque:

    Este utiliza un único «delegada» controlador registrado en toda la tabla, pero sólo para escuchar a los clics en la 3ª columna:

    $('table').on('click', 'td:nth-child(3)', function() {
        alert($(this).prev().html());
    });

    [ Este código debe, por supuesto, aparecen en un $(document).ready() controlador para asegurarse de que no se ejecuta hasta después de que el DOM esté cargado].

  4. 2
    <table>
        <tr>
            <td>1</td>
            <td>getthis</td>
            <td class="clickMe">4</td>
            <td>5</td>
        </tr>
    </table>
    
    <script>
    $(".clickMe").click(function() {
        alert(this.parentNode.children[1].innerText);
    });
    </script>

    He aquí un ejemplo de trabajo: http://jsfiddle.net/sme7c/1

    • cuidado de no – childNodes puede contener elementos de texto, incluyendo los espacios en blanco. Es por eso que acabo de utilizar jQuery en lugar de puro DOM.
    • gracias, me lo cambiaron a children de la propiedad para evitar que.
  5. 0

    Hay una serie de problemas con su código.

    1. Estás usando comillas dobles en su código jQuery, pero no se les escapó, así que usted está terminando prematuramente el atributo, y la generación de código HTML no válido.

    2. El código jQuery simplemente devuelve una cadena, pero no hacer nada con ella, así que usted no debe esperar para ver nada.

    3. Su elemento de indexación puede estar equivocado; elementos que son indexadas desde 0, no 1, por lo que :eq(2) devuelve el tercer elemento y no el segundo. O, dicho de otra manera, su código se encuentra exactamente el mismo elemento que se ha hecho clic en.

Dejar respuesta

Please enter your comment!
Please enter your name here