0

I have create a table with following style. Now I want to get first td value as 1,2,3 using jQuery.

<html> <head> <style type='text/css'> table { counter-reset: rowNumber; } table tr { counter-increment: rowNumber; } table tr td:first-child::before { content: counter(rowNumber); min-width: 1em; margin-right: 0.5em; } </style> </head> <body> <table border="1" id="MyTable"> <tr> <td></td> <td>blue</td> </tr> <tr> <td></td><td>red</td> </tr> <tr> <td></td><td>black</td> </tr> </table> </body> </html>

I tried with following script but it showing row counter as text. How to get the value of first td?

<script> $("#MyTable").find('tr').each(function (i, el) { $(this).find('td:eq(0)').each(function () { console.log(window.getComputedStyle(this, ':before').content); }); }); </script>
Improve this question
4
  • Do you mean you want to get the value of the first td of each table row? Commented Jul 28, 2021 at 2:48
  • Yes. I want the row counter value. Commented Jul 28, 2021 at 2:51
  • Probably, you want to put 1,2,3 in TD on DOM. You can do like this: $("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i); }); Commented Jul 28, 2021 at 3:08
  • According to this post, it seems to be impossible. Commented Jul 28, 2021 at 3:23

3 Answers 3

Reset to default
1

Based on this:

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor.

So if you see the html that generated, you will see all td is empty while you see counter (1,2,3) in page. this is html generated:

enter image description here

But this is result:

enter image description here

So generated content does not alter the document tree and you can't access to value of it.

There are lots of alternative you can do it:

$("#MyTable").find('tr').each(function (i, el) { debugger $(this).find('td:eq(0)').each(function (index, el) { $(this).html(i+1) console.log($(this).html()); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1" id="MyTable"> <tbody> <tr> <td></td> <td>blue</td> </tr> <tr> <td></td> <td>red</td> </tr> <tr> <td></td> <td>black</td> </tr> </tbody> </table>

Update

You can rest number after each modification on your table:

 function setnumber() { $('#MyTable tbody tr').each(function (i) { $($(this).find('td')[0]).html(i + 1); }); } $(".delete").click(function () { $(this).closest('tr').remove(); setnumber(); }); setnumber();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1" id="MyTable"> <tbody> <tr> <td></td> <td>blue</td> <td><span class="delete"><i class="fas fa-trash"></i>delete</span></td> </tr> <tr> <td></td> <td>red</td> <td><span class="delete"><i class="fas fa-trash"></i>delete</span></td> </tr> <tr> <td></td> <td>black</td> <td><span class="delete"><i class="fas fa-trash"></i>delete</span></td> </tr> </tbody> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

yes.. but if we delete the any row of table then row number will not change. suppose I deleted the 2nd row then it will show the 1 and 3 in first column. as per your code snippet we need to run loop through row every time to reset the value of first column.
@Rekha you can create function to reset row number and then call the function in each modification (such as delete. insert , ..) on your table. see updated answer
@Rekha Note that anyway you need loop. think of CSS Selector? How CSS Selector, selects specific tag? Without loop how it can find all element and update row number?
0

Probably, you want to put 1,2,3 in TDS on DOM. You can do like this:

$("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i); });

https://codesandbox.io/s/jquery-playground-forked-pmtgc?file=/src/index.js

Improve this answer

Comments

0

You can use child selector to select the child of tr

 jQuery("body > table > tr:nth-child(1) > td:nth-child(1)").text();
Improve this answer

2 Comments

Hi, thanks for answering, can you explain Lil bit about this piece of code do.
jQuery contains the CSS selector of that element and .text() function returns the text data in that element. For more information, you need to learn a little-bit about jQuery. This is a very simple code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.