jQuery addClass example

Change class name on click in jQuery

by Alexander Branchugov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="result">
  <table class="table mb-0" cellpadding="0">
      <tbody>
          <tr>
              <td>ППЭ</td>
              <td>Аудитория</td>
              <td>Вариант</td>
              <td>Часть B</td>
              <td>Часть C</td>
              <td>Первичный балл</td>
              <td>Отметка</td>
          </tr>
          <tr>
              <td>486</td>
              <td>0012</td>
              <td>22231</td>
              <td>-+++-++-+++++</td>
              <td>2(2) 2(3) 2(2) 2(2) 3(3) 2(2) 2(2) 1(2) 1(2) 1(2) 2(2) 2(2) </td>
              <td>32</td>
              <td>4</td>
          </tr>
      </tbody>
  </table>
</div>
<input id="button" type="submit" value="Добавить атрибут aria-label к td (во втором tr)">

CSS

@media screen and (max-width: 800px) {
    table.table tr:first-child {
        display: none;
    }
    table.table tr {
        display: block;
        margin-bottom: 1rem;
        border-bottom: 2px solid #e8e9eb;
    }
    table.table td {
        display: block;
        text-align: right;
    }
    table.table td:before {
        content: attr(aria-label);
        float: left;
        font-weight: bold;
    }
    table.table td {
        padding: 0.6rem 1rem;
        border-bottom: 1px solid #e8e9eb;
    }
}

JavaScript

$(function(){

    $("#button").click(function() {
      td1 = $("#result").find("table tr:nth-child(1) td");
      td2 = $("#result").find("table tr:nth-child(2) td");
      $(td1).each(function( index ) {
        title = $(this).text();
        $(td2).eq(index).attr("aria-label", title);
      });
    });
});