CODEWITHSUNDEEP
javascripthtmljquerycsshtml-table
userone
userone

Reputation: 25

select a td by table class

I've searched online for the answer but

$(".classname tbody tr td") or $("table.classname tbody tr td")

don't work, I have got a table with only a class and I need to operate on tds etc.

the only reason why it don't work is probably the name of the class which is :table name name-surname.

the html is like this

<div class="tab">
  <table class="table name name-surname">
     <tbody>
        <tr>
          <td>name</td>
          <td>surname</td>
        </tr>
     </tbody>
  </table>
</div>

is this the real problem or i'm missing something? there's a way to go around it? i can't add an id or change the name of the class

Upvotes: 2

Views: 978

Answers (4)

dhairyaj
dhairyaj

Reputation: 1

You have to use "." for all the classes [.table.name.name-surname] and for the element tags, just their names [tbody td]
Also, you don't have tr element in your html.

console.log($(".table.name.name-surname tbody td"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="tab">
  <table class="table name name-surname">
    <tbody>
      <td>name</td>
      <td>surname</td>
    </tbody>
  </table>
</div>

Upvotes: 0

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9923

Just use one of your table class like $(".table") or if you want to use multiple class connect them by dot like this: $('.table.name.name-surname tbody tr td')

Here is working sample:

$(".table tbody tr td").each(function(itm,el) {
   console.log(el);
});

$('.table.name.name-surname tbody tr td').each(function(itm,el) {
   console.log(el);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
        <table class="table name name-surname">
            <tbody>
                <tr>
                    <td>name</td>
                    <td>surname</td>
                </tr>
            </tbody>
        </table>
    </div>

Upvotes: 0

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

You could always write your selector as this .table.name.name-surname tbody tr td

$(".table.name.name-surname tbody tr td").each(function() {
  console.log($(this).html())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="tab">
  <table class="table name name-surname">
    <tbody>
      <td>name</td>
      <td>surname</td>
    </tbody>
  </table>
</div>

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 20006

Inorder for $(".classname tbody tr td") or $("table.classname tbody tr td") to work, the tablw should have a class called classname

console.log($(".classname tbody tr td"));
console.log($("table.classname tbody tr td"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="tab">
  <table class="table name name-surname classname">
    <tbody>
      <td>name</td>
      <td>surname</td>
    </tbody>
  </table>
</div>

Upvotes: 0

Related Questions