jQuery-将所有突出显示的tds插入所有trs

问题描述 投票:0回答:1

我正在使用jQuery表通过单击相应的按钮来插入行(之前或之后)。

  1. insertRowBeforeinsertRowAfter的OnClick,我能够克隆所选行并成功插入前后。

  2. 任何td的onClick,我都可以添加类并突出显示所有索引的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>

致谢@ Sajeeb Ahamed,@ Rory McCrossan@@ epascarello来突出显示tds。

javascript jquery
1个回答
0
投票

您可以这样做:

$('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>
© www.soinside.com 2019 - 2024. All rights reserved.