jQuery - Вставить все выделенные tds во все trs - PullRequest
1 голос
/ 05 мая 2020

Я использую таблицу jQuery для вставки строки (до или после), нажимая соответствующие кнопки.

  1. OnClick для insertRowBefore и insertRowAfter, я могу клонировать выбранную строку и вставить до и после успешно.

  2. onClick любого td, я могу добавить класс и выделить все проиндексированные tds.

  3. То же самое, как можно Я клонирую все выбранные tds и вставляю как новый столбец до или после выбранного столбца в каждой строке

enter image description here

$('button').attr('disabled', true);

$(document).on('click', "table#myTable tr td", function(){
  let index = $(this).index();
  $('#myTable tr').removeClass('tr-active');
  $('#myTable tr td').removeClass('td-active');
  $(this).closest('tr').addClass('tr-active');
  $(`#myTable tr td:nth-child(${index + 1})`).addClass('td-active');
  $('button').attr('disabled', false);
  $('p').css('visibility', 'hidden');
});

$(document).on('click', '#addRowBefore', function(){
  var selectedRow = $('table#myTable tr.tr-active');
  $(selectedRow).clone().insertBefore('table#myTable tr.tr-active');
  $('table#myTable tr').removeClass('tr-active');
  $('table#myTable tr td').removeClass('td-active');
  $('button').attr('disabled', true);
  $('p').css('visibility', 'visible');
});

$(document).on('click', '#addRowAfter', function(){
  var selectedRow = $('table#myTable tr.tr-active');
  $(selectedRow).clone().insertAfter('table#myTable tr.tr-active');
  $('table#myTable tr').removeClass('tr-active');
  $('table#myTable tr td').removeClass('td-active');
  $('button').attr('disabled', true);
  $('p').css('visibility', 'visible');
});
body{font-family:verdana;font-size:13px;}
table, td{border:1px solid #000;border-collapse:collapse;}
td{padding:5px;min-width:60px;}
.buttons{margin-top:20px;}
td.td-active{background-color:#ffcbcb !important;}
tr.tr-active td{background-color:#ccc;}
p{background-color:#ffbebe;padding:5px;border:1px solid #bb4040;}
button {background-color: #471173;border: 1px solid #2d0150;padding: 5px 10px;margin-right: 5px;color: #ffffff;cursor:pointer;}

button:disabled{background-color: #e8e8e8;border: 1px solid #bfbfbf;color: #9a9a9a;cursor:not-allowed}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="myTable">
  <tr>
    <td>R1 C1</td>
    <td>R1 C</td>
    <td>R1 C3</td>
    <td>R1 C4</td>
  </tr>
  <tr>
    <td>R2 C1</td>
    <td>R2 C2</td>
    <td>R2 C3</td>
    <td>R2 C4</td>
  </tr>
  <tr>
    <td>R3 C1</td>
    <td>R3 C2</td>
    <td>R3 C3</td>
    <td>R3 C4</td>
  </tr>
</table>
<br>
<p>Please select / click on any cell to enable actions.</p>
<button id="addRowBefore">Insert row before</button>
<button id="addRowAfter">Insert row after</button>
<br>
<br>
<button id="addColumnBefore">Insert column before</button>
<button id="addColumnAfter">Insert column after</button>

Кредиты @ Саджибу Ахамеду, @ Рори МакКроссану и @ epascarello за помощь в выделении тд .

1 Ответ

1 голос
/ 05 мая 2020

Вы можете сделать это так, используя each(), чтобы выбрать все активные ячейки, клонировать их и вставить клон до или после выбранных ячеек.

$('button').attr('disabled', true);

$(document).on('click', "table#myTable tr td", function() {
  let index = $(this).index();
  $('#myTable tr').removeClass('tr-active');
  $('#myTable tr td').removeClass('td-active');
  $(this).closest('tr').addClass('tr-active');
  $(`#myTable tr td:nth-child(${index + 1})`).addClass('td-active');
  $('button').attr('disabled', false);
  $('p').css('visibility', 'hidden');
});

$(document).on('click', '#addRowBefore', function() {
  var selectedRow = $('table#myTable tr.tr-active');
  $(selectedRow).clone().insertBefore('table#myTable tr.tr-active');
  $('table#myTable tr').removeClass('tr-active');
  $('table#myTable tr td').removeClass('td-active');
  $('button').attr('disabled', true);
  $('p').css('visibility', 'visible');
});

$(document).on('click', '#addRowAfter', function() {
  var selectedRow = $('table#myTable tr.tr-active');
  $(selectedRow).clone().insertAfter('table#myTable tr.tr-active');
  $('table#myTable tr').removeClass('tr-active');
  $('table#myTable tr td').removeClass('td-active');
  $('button').attr('disabled', true);
  $('p').css('visibility', 'visible');
});
$(document).on('click', '#addColumnBefore', function() {
  $('table#myTable td.td-active').each(function() {
    $(this).clone().insertBefore($(this));
  });
  $('table#myTable tr').removeClass('tr-active');
  $('table#myTable tr td').removeClass('td-active');
  $('button').attr('disabled', true);
  $('p').css('visibility', 'visible');

});
$(document).on('click', '#addColumnAfter', function() {
  $('table#myTable td.td-active').each(function() {
    $(this).clone().insertAfter($(this));
  });
  $('table#myTable tr').removeClass('tr-active');
  $('table#myTable tr td').removeClass('td-active');
  $('button').attr('disabled', true);
  $('p').css('visibility', 'visible');

});
body{font-family:verdana;font-size:13px;}
table, td{border:1px solid #000;border-collapse:collapse;}
td{padding:5px;min-width:60px;}
.buttons{margin-top:20px;}
td.td-active{background-color:#ffcbcb !important;}
tr.tr-active td{background-color:#ccc;}
p{background-color:#ffbebe;padding:5px;border:1px solid #bb4040;}
button {background-color: #471173;border: 1px solid #2d0150;padding: 5px 10px;margin-right: 5px;color: #ffffff;cursor:pointer;}

button:disabled{background-color: #e8e8e8;border: 1px solid #bfbfbf;color: #9a9a9a;cursor:not-allowed}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td>R1 C1</td>
    <td>R1 C</td>
    <td>R1 C3</td>
    <td>R1 C4</td>
  </tr>
  <tr>
    <td>R2 C1</td>
    <td>R2 C2</td>
    <td>R2 C3</td>
    <td>R2 C4</td>
  </tr>
  <tr>
    <td>R3 C1</td>
    <td>R3 C2</td>
    <td>R3 C3</td>
    <td>R3 C4</td>
  </tr>
</table>
<br>
<p>Please select / click on any cell to enable actions.</p>
<button id="addRowBefore">Insert row before</button>
<button id="addRowAfter">Insert row after</button>
<br>
<br>
<button id="addColumnBefore">Insert column before</button>
<button id="addColumnAfter">Insert column after</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...