Контролировать несколько таблиц индивидуально

Question

Я использую несколько таблиц HTML, каждая таблица имеет свою собственную панель инструментов.Но я не могу контролировать каждый стол в отдельности.Если вы посмотрите на пример , вы увидите, что если я нажму кнопку размера шрифта или кнопку высоты строки, это повлияет на обе таблицы.Я ищу решение, где мне не нужно иметь уникальные идентификаторы для каждой таблицы.

Я пытался работать с:

closest('element-row').find('.title')  

без удачи.Возможно, это возможное решение, не уверен.

jsfiddle пример

$(".line-height-btn").click(function() {
  if ($(".large-line-height").length) {
    $("td").removeClass("large-line-height").addClass("medium-line-height");
  } else if ($(".medium-line-height").length) {
    $("td").removeClass("medium-line-height").addClass("small-line-height");
  } else if ($(".small-line-height").length) {
    $("td").removeClass("small-line-height").addClass("large-line-height");
  } else {
    $("td").addClass("medium-line-height");
  }
});

$(".format-size-btn").click(function() {
  if ($(".large-font-size").length) {
    $("td").removeClass("large-font-size").addClass("medium-font-size");
  } else if ($(".medium-font-size").length) {
    $("td").removeClass("medium-font-size").addClass("small-font-size");
  } else if ($(".small-font-size").length) {
    $("td").removeClass("small-font-size").addClass("large-font-size");
  } else {
    $("td").addClass("medium-font-size");
    console.log("Hello world!");
  }
});

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.large-line-height {
  line-height: 3rem !important;
}

.medium-line-height {
  line-height: 2rem !important;
}

.small-line-height {
  line-height: 1rem !important;
}

.large-font-size {
  font-size: 16px !important;
  letter-spacing: -0.004em !important;
}

.medium-font-size {
  font-size: 14px !important;
  letter-spacing: 0.001em !important;
}

.small-font-size {
  font-size: 12px !important;
  letter-spacing: 0.008em !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="table-card">
  <div class="table-title-row">
    <div class="table-title-text">
      <h3>Header</h3></div>
    <div class="table-title-buttons">
      <a class="btn format-size-btn">
        <i class="material-icons">
          format_size
        </i>
        <span class="btn-label"></span>
      </a>
      <a class="btn line-height-btn">
        <i class="material-icons">
          line_weight
        </i>
        <span class="btn-label"></span>
      </a>
    </div>
  </div>
  <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>
            <div class="checkbox">
              <input id="check-all" type="checkbox">
              <label for="check-all"></label>
            </div>
          </th>
          <th align="right">Object</th>
          <th align="left">Type</th>
          <th align="left">Group</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-1" type="checkbox">
              <label for="check-1"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-2" type="checkbox">
              <label for="check-2"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-3" type="checkbox">
              <label for="check-3"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="table-card">
  <div class="table-title-row">
    <div class="table-title-text">
      <h3>Header</h3></div>
    <div class="table-title-buttons">
      <a class="btn format-size-btn">
        <i class="material-icons">
          format_size
        </i>
        <span class="btn-label"></span>
      </a>
      <a class="btn line-height-btn">
        <i class="material-icons">
          line_weight
        </i>
        <span class="btn-label"></span>
      </a>
   
    </div>
  </div>
  <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>
            <div class="checkbox">
              <input id="check-all" type="checkbox">
              <label for="check-all"></label>
            </div>
          </th>
          <th align="right">Object</th>
          <th align="left">Type</th>
          <th align="left">Group</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-1" type="checkbox">
              <label for="check-1"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-2" type="checkbox">
              <label for="check-2"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-3" type="checkbox">
              <label for="check-3"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

Вы можете использовать следующий код:

$(".line-height-btn").click(function() {
if ($(".large-line-height").length) {
$(this).parent().parent().next().find("td").removeClass("large-line-height").addClass("medium-line-height");
} else if ($(".medium-line-height").length) {
 $(this).parent().parent().next().find("td").removeClass("medium-line-height").addClass("small-line-height");
} else if ($(".small-line-height").length) {
 $(this).parent().parent().next().find("td").removeClass("small-line-height").addClass("large-line-height");
  } else {
    $(this).parent().parent().next().find("td").addClass("medium-line-height");
     }
    });

Аналогичным образом примените этот тип логики для $ (". Format-size-btn"). Click ()

Answer 2

let $td = $(evt.target).closest('.table-title-row').next('.table-container').find('td'); внутри вашей функции-обработчика - с учетом текущей структуры HTML - найдет нужные ячейки таблицы.

$(".line-height-btn").on("click", function(evt) {
  let $tbody = $(evt.target).closest('.table-title-row').next('.table-container').find('tbody')[0];
  switch($tbody.className) {
  case "large-line-height":
    $tbody.className = "medium-line-height";
    break;
  case "medium-line-height":
    $tbody.className = "small-line-height";
    break;
  case "small-line-height":
    $tbody.className = "large-line-height";
    break;
  default:
    $tbody.className = "medium-line-height";
  }
});

$(".format-size-btn").on("click", function(evt) {
  let $table = $(evt.target).closest('.table-title-row').next('.table-container').find('table')[0];
  switch($table.className) {
  case "large-font-size":
    $table.className = "medium-font-size";
    break;
  case "medium-font-size":
    $table.className = "small-font-size";
    break;
  case "small-font-size":
    $table.className = "large-font-size";
    break;
  default:
    $table.className = "medium-font-size";
    console.log("Hello world!");
  }
});

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.large-line-height td {
  line-height: 3rem !important;
}

.medium-line-height td  {
  line-height: 2rem !important;
}

.small-line-height td  {
  line-height: 1rem !important;
}

.large-font-size td  {
  font-size: 16px !important;
  letter-spacing: -0.004em !important;
}

.medium-font-size td  {
  font-size: 14px !important;
  letter-spacing: 0.001em !important;
}

.small-font-size td  {
  font-size: 12px !important;
  letter-spacing: 0.008em !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="table-card">
  <div class="table-title-row">
    <div class="table-title-text">
      <h3>Header</h3>
    </div>
    <div class="table-title-buttons">
      <a class="btn format-size-btn">
        <i class="material-icons">
          format_size
        </i>
        <span class="btn-label"></span>
      </a>
      <a class="btn line-height-btn">
        <i class="material-icons">
          line_weight
        </i>
        <span class="btn-label"></span>
      </a>
    </div>
  </div>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>
            <div class="checkbox">
              <input id="check-all" type="checkbox">
              <label for="check-all"></label>
            </div>
          </th>
          <th align="right">Object</th>
          <th align="left">Type</th>
          <th align="left">Group</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-1" type="checkbox">
              <label for="check-1"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-2" type="checkbox">
              <label for="check-2"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-3" type="checkbox">
              <label for="check-3"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="table-card">
  <div class="table-title-row">
    <div class="table-title-text">
      <h3>Header</h3>
    </div>
    <div class="table-title-buttons">
      <a class="btn format-size-btn">
        <i class="material-icons">
          format_size
        </i>
        <span class="btn-label"></span>
      </a>
      <a class="btn line-height-btn">
        <i class="material-icons">
          line_weight
        </i>
        <span class="btn-label"></span>
      </a>

    </div>
  </div>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>
            <div class="checkbox">
              <input id="check-all" type="checkbox">
              <label for="check-all"></label>
            </div>
          </th>
          <th align="right">Object</th>
          <th align="left">Type</th>
          <th align="left">Group</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-1" type="checkbox">
              <label for="check-1"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-2" type="checkbox">
              <label for="check-2"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-3" type="checkbox">
              <label for="check-3"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>