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>
3 answers
solution1
1 2021-07-28 03:28:40
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>
solution2
0 2021-07-28 03:11:00
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
solution3
0 2021-07-28 03:33:57
您可以使用子选择器来选择 tr 的孩子
jQuery("body > table > tr:nth-child(1) > td:nth-child(1)").text();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.