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

R. Radio спросил: 12 мая 2018 в 04:39 в: jquery

Я использую несколько 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>

2 ответа

Naveen Chandra Tiwari ответил: 12 мая 2018 в 04:58

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

$(".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 ()

R. Radio ответил: 12 мая 2018 в 05:21
Кажется, я могу контролировать только стол, с которым я начинаю взаимодействовать. Если нажать кнопку второй таблицы, я не смогу контролировать первую таблицу, если я не сброшу вторую таблицу, тогда я смогу контролировать только первый.
connexo ответил: 12 мая 2018 в 05:44

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>
R. Radio ответил: 12 мая 2018 в 05:18
Кажется, он работает почти каждый раз. Но если я прыгаю между панелями инструментов, нажимает кнопку довольно случайную кнопку внутри таблицы, в которой я сейчас не нажимаю, перестает работать. Я могу сделать его кликабельным снова, сопоставив тот же размер шрифта в обеих таблицах. Как будто это зависит друг от друга.
connexo ответил: 12 мая 2018 в 05:44
Причина этого в том, что вы снова проверяете, есть ли any td с теми классами, которые вы проверяете. Это также будет соответствовать другим таблицам таблицы. Немного изменил концепцию и скорректировал код.
R. Radio ответил: 12 мая 2018 в 07:24
Это работает! однако, как бы вы масштабировали это, если в панели инструментов есть дополнительные кнопки, возможно, добавление цветов контрастности или что-то еще?