Working with <tr><td> to optimize Jquery

Asked

Viewed 59 times

2

I want to study more about <table> <tr> <td> etc, to optimize my projects.
Example: I have 4 <tr> with 2 <td> each, when applying a formula in jQuery for example, add the first <td> with the second <td> of each <tr> using little formula. I want to know how to reference the first with the second of each line.
Any idea?

jquery html

  • The most appropriate way to do it depends on the goal, as well as the html structure you are using. Try to be more specific at these two points

  • My only goal is to study the structure, but I don’t know why Google for this study.

  • It wasn’t very clear. You want the two tds of each line to go?

  • If each line has 2 td, the whole table will disappear.

  • I subscribe to what @Dvd said, it’s not really clear. What I meant by this last statement "I want to know how to reference the first with the second of each line" ?

  • I could not be clear in the question, excuse me, the objective is to study the referencing of the structure.. to optimize the projects in jQuery, the sum is just an example for the case I have 150 <tr> and 20 <td> in each <tr>, ai imagine the size of jQuery if you are going to do sum by sum in each <tr>, understand?

  • the idea is so.. jQuery -> add the first <td> with the second <td> of each <tr> and return the result in the third <td> of each <tr> ===>> remembering, this is only one example

  • Vc says adding numerical values from one td to another?

  • the goal I think was clear, only the study of the structure, how to navigate through the html Tables and make references by <tr> and <td>... I can’t find any of this in google

  • not dvd, I want to know how to make jQuery understand what is the first <td> of each <tr>.. the sum is just an example to try to make the question clearer (unsuccessfully) kk...

  • 1

    The first <td> of each <tr> is given by $("tr").children().first(). Is that what you wanted to know? Or even everything on the dial, with $("tr td:first-child"). In the latter case it is purely CSS Jquery is not even relevant

  • that! , that’s the idea, has some documentation, or some specific name so that I can delve into this reference??

Show 7 more comments

1 answer

2


To reference the first td of each tr, you can use two ways:

1st: with first-child:

$("tbody tr td:first-child").css("color","red");

:first-child is a pseudo-class which in this case references all first td daughter of a tr in tbody.

2nd: with nth-child(1):

$("tbody tr td:nth-child(1)").css("color","red");

To reference the second td of each tr, you can use nth-child(2):

$("tbody tr td:nth-child(2)").css("color","red");

To reference the third td forward, just change the index to 3, 4 onwards:

$("tbody tr td:nth-child(index)").css("color","red");

Remember that the index of nth-child() in jQuery starts with 1.

  • That’s right!! Is there a name for me to deepen, study these references? For me to know if it only works with <tr>, or if it works with <div> as well..

  • 1

    @Thiagokoller Yes. Study pseudo-classes and pseudo-elements as well as CSS selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes and http://www.maujor.com/tutorial/guia-completo-seletores-css3.php

  • 1

    @Thiagokoller Interesting also this answer: https://answall.com/a/250488/8063

  • @Thiagokoller Works with any element.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.