0

I'm trying to add the class name available in the th tag to all dropdowns inside the corresponding th.

For example:

The second th has the class name 6. So need to add 6 as class name to all the dropdowns available in the second td's in the rows. I've tried the answer mentioned in this post: JQuery: If a table header <th> has a class, add class to table cell <td>. But it's working fine in my case.

Thanks in advance.

$('tbody tr td .get_hnos').each(function(index){
    debugger;
    //index contains the current td index in the parent tr (1,2,3),(1,2,3)...
    //if the corresponding th has a class
    if($('thead tr th').eq(index).attr('class') != ''){
        //put this class on the current td
        $(this).addClass($('thead tr th').eq(index).attr('class'));
    }
});
<table class="table table-responsive table-bordered">
                                    
                                        <thead>
                                        <tr>
                                            <th>Sr.</th> 
                                                                                        <th class="6">Title 1</th> 
                                                                                         <th class="7">Title 2</th> 
                                                                            
                                        </tr> 
                                        </thead>
                                        <tbody><tr> </tr><tr><input type="hidden" name="sr_no" value="30"><input type="hidden" name="batch" value=""><input type="hidden" name="valve_no[]" value="1"><td>1</td><td><select name="1[]" class="get_hnos" id="1"><option value="BH123" selected="">BH123</option>

</select> 
</td>
<td><select name="1[]" class="get_hnos 6" id="1">
<option value="H89" selected="">H89</option>
</select> 
</td>
</tr>
<tr> </tr><tr><input type="hidden" name="sr_no" value="30"><input type="hidden" name="batch" value=""><input type="hidden" name="valve_no[]" value="2"><td>2</td><td><select name="2[]" class="get_hnos 7" id="2"><option value="BH123" selected="">BH123</option>

</select> 
</td>
<td><select name="2[]" class="get_hnos" id="2">
<option value="H89" selected="">H89</option>
</select> 
</td>
</tr>
<tr> </tr><tr><input type="hidden" name="sr_no" value="30"><input type="hidden" name="batch" value=""><input type="hidden" name="valve_no[]" value="3"><td>3</td><td><select name="3[]" class="get_hnos" id="3"><option value="BH123" selected="">BH123</option>

</select> 
</td>
<td><select name="3[]" class="get_hnos" id="3">
<option value="H89" selected="">H89</option>
</select> 
</td>
</tr>
<tr> </tr><tr><input type="hidden" name="sr_no" value="30"><input type="hidden" name="batch" value=""><input type="hidden" name="valve_no[]" value="4"><td>4</td><td><select name="4[]" class="get_hnos" id="4"><option value="BH123" selected="">BH123</option>

</select> 
</td>
<td><select name="4[]" class="get_hnos" id="4">
<option value="" selected=""></option>
</select> 
</td>
</tr>
                                    </tbody></table>
Hello
  • 173
  • 8

2 Answers2

1

You can loop through tr inside that loop through tds and then using index see if class of th is undefined then only add class to your select-box.

Demo Code :

$("tbody tr").each(function() {
  //loop thrh td
  $(this).find('td').each(function(index) {
    if ($('thead tr th:eq(' + index + ')').attr('class') != undefined) {
      //assign class to select
      $(this).find('select').addClass($('thead tr th:eq(' + index + ')').attr('class'));

    }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-responsive table-bordered">

  <thead>
    <tr>
      <th>Sr.</th>
      <th class="6">Title 1</th>
      <th class="7">Title 2</th>

    </tr>
  </thead>
  <tbody>
    <tr> </tr>
    <tr><input type="hidden" name="sr_no" value="30"><input type="hidden" name="batch" value=""><input type="hidden" name="valve_no[]" value="1">
      <td>1</td>
      <td>
        <select name="1[]" class="get_hnos" id="1">
          <option value="BH123" selected="">BH123</option>

        </select>
      </td>
      <td>
        <select name="1[]" class="get_hnos" id="1">
          <option value="H89" selected="">H89</option>
        </select>
      </td>
    </tr>
    <tr> </tr>
    <tr><input type="hidden" name="sr_no" value="30"><input type="hidden" name="batch" value=""><input type="hidden" name="valve_no[]" value="2">
      <td>2</td>
      <td>
        <select name="2[]" class="get_hnos" id="2">
          <option value="BH123" selected="">BH123</option>

        </select>
      </td>
      <td>
        <select name="2[]" class="get_hnos" id="2">
          <option value="H89" selected="">H89</option>
        </select>
      </td>
    </tr>
    <tr> </tr>
    <tr><input type="hidden" name="sr_no" value="30"><input type="hidden" name="batch" value=""><input type="hidden" name="valve_no[]" value="3">
      <td>3</td>
      <td>
        <select name="3[]" class="get_hnos" id="3">
          <option value="BH123" selected="">BH123</option>

        </select>
      </td>
      <td>
        <select name="3[]" class="get_hnos" id="3">
          <option value="H89" selected="">H89</option>
        </select>
      </td>
    </tr>
    <tr> </tr>
    <tr><input type="hidden" name="sr_no" value="30"><input type="hidden" name="batch" value=""><input type="hidden" name="valve_no[]" value="4">
      <td>4</td>
      <td>
        <select name="4[]" class="get_hnos" id="4">
          <option value="BH123" selected="">BH123</option>

        </select>
      </td>
      <td>
        <select name="4[]" class="get_hnos" id="4">
          <option value="" selected=""></option>
        </select>
      </td>
    </tr>
  </tbody>
</table>
Swati
  • 28,069
  • 4
  • 21
  • 41
  • Thanks for the answer. Can you look into this plz https://stackoverflow.com/questions/66183431/jquery-append-to-the-multiple-dropdowns-for-matching-array-keys-as-class-name ? – Hello Feb 13 '21 at 13:04
0

This can be simplified somewhat, and it probably makes more intuitive sense to begin from the point of (i.e. loop over) the th tags.

let table = $('table');
table.find('th').each((i, th) => {
    table.find('td:nth-child('+(i+1)+')')[0].className = th.className;
});

Note: This adds the same class(es) that the th has to the corresponding tds. If the th has multiple classes, and only one/some of them should be transferred to the tds, you would have to further code some sort of class filtering, to establish which class(es) were transferred.

Also note that this transfers classes to tds, but your code seems to suggest you want the classes instead to be transferred to a child of the tds (.get_hnos).

Mitya
  • 33,629
  • 9
  • 60
  • 107
  • Classes are not getting added dropdowns with the above code. – Hello Feb 13 '21 at 11:42
  • *Read* my last paragraph. Your question asks for the classes to be transferred to the `tds`, not the dropdowns. If you want to transfer classes to the dropdowns, be clear about that. – Mitya Feb 13 '21 at 11:43
  • Yes, I want to add it to the dropdowns. – Hello Feb 13 '21 at 11:46
  • Then please edit your question, because you don't ask for that. If you want to add to the dropdowns, just extend the selector in the line `table.find('td:nth-child('+(i+1)+')')` to go deeper to the dropdown. – Mitya Feb 13 '21 at 11:48