在表格中添加和删除行

时间：2018-08-29 06:26:33

标签： javascript jquery

我需要帮助。 当我单击绿色加号时，我想在表格中添加一行。 当我添加一个新区域并单击绿色加号时，我想向该区域中的表添加一行，但是它不起作用。删除行也不起作用。 你能帮我吗？

https://jsfiddle.net/agata666/hu1cvy5n/44/ 

   var TABLEELEVEN = $('.tableEleven');

$('.table-add-eleven').click(function () {
    var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
    TABLEELEVEN.find('table').append($clone);
});

$('.table-remove').click(function () {
    $(this).parents('tr').detach();
    sumTotalPower()
});


var $foo = $(".tab-pane");
var hash = 1;
$(".add").on("click", function () {
    var $newPanel = $foo.clone();
    var hashClass = 'zone-panel-' + generateHash();
    $newPanel.find(".panel").data('hash', hashClass).attr("href",  "#" + (++hash)).text("Zone " + hash);

    var nextTab = $('.tabs li').size()+1;
    $('<li class="' + hashClass + '"><a href="#tab' + hashClass + '" data-toggle="tab" contenteditable="true">Zone ' + hash + '</a></li>').appendTo('.tabs');



$('.table-add-eleven').click(function () {
    var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
    TABLEELEVEN.find('table').append($clone);
});

});



var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');

function generateHash() {
    return Math.random().toString(16).substr(-5);
}

addZoneButton.addEventListener('click', function () {
    var randomNumber = generateHash();
    panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
    exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
    exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
});

2 个答案:

答案 0 :(得分：1)

我测试了您的代码。

您有一个重复的代码，这就是为什么当您单击绿色按钮时会看到两次行。删除其中之一

$('.table-add-eleven').click(function () {
var $clone = TABLEELEVEN.find('tr.hide').clone(true).removeClass('hide');
TABLEELEVEN.find('table').append($clone);
});

您需要为每个区域创建表的新实例。

答案 1 :(得分：0)

这是更新的代码https://jsfiddle.net/dsu7vpa1/2/

您还可以在下面进行测试。

var TABLEELEVEN = $('.tableEleven');


$('.table-add-eleven').click(function() {
  var $clone = $(this).closest('.tableEleven').find('tr.hide').clone(true).removeClass('hide');
  $(this).closest('.tableEleven').find('table').append($clone);
});

$('.table-remove').click(function() {
  $(this).parents('tr').detach();
  sumTotalPower()
});

var $foo = $(".tab-pane");
var $newPanelDefault = $foo.clone();
var hash = 1;
$(".add").on("click", function() {
  var $newPanel = $newPanelDefault.clone();

  var hashClass = 'zone-panel-' + generateHash();
  $newPanel.find(".panel").data('hash', hashClass).attr("href", "#" + (++hash)).text("Zone " + hash);
  $newPanel.attr("id", "tab" + hash);

  var nextTab = $('.tabs li').size() + 1;
  $('<li class="' + hashClass + '"><a href="#tab' + hash + '" data-toggle="tab" contenteditable="true">Zone ' + hash + '</a></li>').appendTo('.tabs');
  $($newPanel).appendTo('.tab-content');

  $($newPanel).find('.table-add-eleven').click(function() {
    var $clone = $(this).closest('.tableEleven').find('tr.hide').clone(true).removeClass('hide');
    $(this).closest('.tableEleven').find('table').append($clone);
  });

  $($newPanel).find('.table-remove').click(function() {
    $(this).parents('tr').detach();
    sumTotalPower()
  });

  $('a[href="#tab' + hash + '"]').click();
});

var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');

function generateHash() {
  return Math.random().toString(16).substr(-5);
}

addZoneButton.addEventListener('click', function() {
  var randomNumber = generateHash();
  panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
  exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
  exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
});
 <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <title>Steer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.4/css/mdb.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    
    <!--Screen 5-->
    <fieldset id="5">
      <section id="screen-five" class="screen-five">
        <div class="container-fluid">

          <div class="exTabFirst">
            <div class="addZone">
              <button type="button" class="btn btn-light btn-md add" id="add">ADD ZONE<i class="fas fa-plus"></i></button>
            </div>
            <ul class="nav nav-tabs tabs">
              <li class="active"><a href="#tab1" class="panel" role="tab" data-toggle="tab" contenteditable="true">Zone 1 </a></li>
            </ul>
            <div class="tab-content first">
              <div class="tab-pane active" id="tab1">
                <div class="tablesScreenSix">





                  <!-- Editable table -->

                  <div class="tableEleven table-editable">
                    <span class="table-add-eleven float-right mb-3 mr-2"><a href="#!" class="text-success"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></a></span>
                    <table class="table table-bordered table-responsive-md table-striped text-center">
                      <tr>
                        <th>Description</th>
                        <th>Description</th>
                        <th>Description</th>
                        <th>Description</th>
                        <th>Description</th>
                        <th>Description</th>
                        <th>Description</th>
                        <th>Description</th>
                        <th>Description</th>
                        <th>Description</th>

                      </tr>
                      <tr>
                        <td contenteditable="true">Window</td>
                        <td contenteditable="true">1</td>
                        <td contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">78.00</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">3.3</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">204.4</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">90</td>

                        <td>
                          <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
                        </td>
                      </tr>
                      <tr>
                        <td contenteditable="true">aaa</td>
                        <td contenteditable="true">1</td>
                        <td contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">4.00</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">3.3</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">294.4</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">90</td>

                        <td>
                          <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
                        </td>
                      </tr>

                      <tr>
                        <td contenteditable="true">aaaa</td>
                        <td contenteditable="true">1</td>
                        <td contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">21.00</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">3.3</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">104.4</td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true">90</td>

                        <td>
                          <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
                        </td>
                      </tr>
                      <tr class="hide">
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>
                        <td onkeypress="return testCharacter(event);" contenteditable="true"></td>

                        <td>
                          <span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="row-buttons delete">
              <button type="button" class="btn btn-danger btn-sm panel-remove deleteZone">
                                    DELETE ZONE
                                </button>
            </div>
            <hr>
          </div>
        </div>
      </section>


    </fieldset>

相关问题
最新问题