How to get the first td value using jquery

Question

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>

Do you mean you want to get the value of the first `td` of each table row? — The KNVB, Jul 28 '21 at 02:48
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); }); — Nitesh, Jul 28 '21 at 03:08
According to [this post](https://stackoverflow.com/questions/532073/how-can-i-read-the-applied-css-counter-value), it seems to be impossible. — The KNVB, Jul 28 '21 at 03:23

Alireza Ahmadi · Answer 1 · 2021-07-28T03:55:35.720

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:

But this is result:

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>

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. — Manoj, Jul 28 '21 at 03:42
@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 — Alireza Ahmadi, Jul 28 '21 at 03:57
@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? — Alireza Ahmadi, Jul 28 '21 at 04:24

score 0 · Answer 2 · answered Jul 28 '21 at 03:11

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

answered Jul 28 '21 at 03:11

Nitesh

1,490
1
12
20

score 0 · Answer 3 · edited Jul 28 '21 at 04:07

0

You can use child selector to select the child of tr

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

edited Jul 28 '21 at 04:07

saurabh

2,553
2
21
28

answered Jul 28 '21 at 03:33

Deep Sojitra

85
1
11

Hi, thanks for answering, can you explain Lil bit about this piece of code do. – saurabh Jul 28 '21 at 04:06
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. – Deep Sojitra Aug 03 '21 at 19:45

How to get the first td value using jquery

3 Answers3