带按钮的模态添加新行（每行一次点击）

时间：2018-01-28 01:46:14

标签： javascript jquery html css

我在标题中遇到模态问题。当我点击标题＆＃34;安全＆＃34;时，它打开安全模式，并设法添加项目ONE ROW EVERY CLICK，这很棒。当我复制第二个标题的代码时，这是＆＃34;操作＆＃34;。问题开始了。 打开安全模态，添加新项目并关闭模态后，打开操作模式并添加新项目。我添加的新项目不是每行一次点击，它添加了两行每次点击，有时三行每次点击。

请帮忙。

＆＃13;
＆＃13; 
// Get the  that opens the Safety NewsFeed
var s_news = document.getElementById('s_news');
var safety = document.getElementById('Safety');
safety.onclick = function() {
  s_news.style.display = "block";
  $('.AddNew').click(function() {
    var row = $(this).closest('tr').clone();
    row.find('input').val('');
    $(this).closest('tr').after(row);
    $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
  });

  $('table').on('click', '.RemoveRow', function() {
    $(this).closest('tr').remove();
  });
}

// Get the <span> element that closes the modal
var snews_span = document.getElementsByClassName("s_newsclose")[0];
// When the user clicks on <span> (x), close the modal
snews_span.onclick = function() {
  s_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(s_newsevent) {
  if (s_newsevent.target == s_news) {
    s_news.style.display = "none";
  }
});
///
// Get the  that opens the Quality Internal NewsFeed
var qi_news = document.getElementById('qi_news');
var qualityint = document.getElementById('QualityInt');
qualityint.onclick = function() {
  qi_news.style.display = "block";
  $('.AddNew').click(function() {
    var row = $(this).closest('tr').clone();
    row.find('input').val('');
    $(this).closest('tr').after(row);
    $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
  });

  $('table').on('click', '.RemoveRow', function() {
    $(this).closest('tr').remove();
  });
}

// Get the <span> element that closes the modal
var qinews_span = document.getElementsByClassName("qi_newsclose")[0];
// When the user clicks on <span> (x), close the modal
qinews_span.onclick = function() {
  qi_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(qi_newsevent) {
  if (qi_newsevent.target == qi_news) {
    qi_news.style.display = "none";
  }
});
＆＃13; 
/* News Feed (background) */

.s_news,
.qi_news {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

.headercolor {
  background-color: rgba(255, 0, 0, 1);
}


/* The Newsfeed Close Button */

.s_newsclose,
.qi_newsclose {
  color: #aaa;
  float: left;
  font-size: 28px;
  font-weight: bold;
}
＆＃13; 
<html>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <h2 style="font-size:1.5rem" id=Safety>Safety</h2>
  <h2 style="font-size:1.5rem" id=QualityInt>Operate</h2>

  <div id="s_news" class="s_news">
    <table>
      <tr>
        <td class=headercolor>ISSUE</td>
        <td class=headercolor>ACTION</td>
        <td class=headercolor>Add/Remove Item</td>
      </tr> <span class="s_newsclose">&times;</span>
      <tr>
        <td><input type='text' value='Add New'></td>
        <td><input type='text' value='Add New'></td>
        <td><input type='button' class='AddNew' value='Add new item'></td>
      </tr>
    </table>
  </div>

  <div id="qi_news" class="qi_news">
    <table>
      <tr>
        <td class=headercolor>ISSUE</td>
        <td class=headercolor>ACTION</td>
        <td class=headercolor>Add/Remove Item</td>
      </tr> <span class="qi_newsclose">&times;</span>
      <tr>
        <td><input type='text' value='Add New'></td>
        <td><input type='text' value='Add New -->'></td>
        <td><input type='button' class='AddNew' value='Add new item'></td>
      </tr>
    </table>

  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

问题是您的 .AddNew 类多次接听电话。只需更改同时针对单击事件的类的名称（安全和操作）。示例：将第一个类更改为“。AddNew1”，将第二个类更改为“。AddNew2”。

这是一个有效的解决方案。希望它有所帮助！

// Get the  that opens the Safety NewsFeed
var s_news = document.getElementById('s_news');
var safety = document.getElementById('Safety');
safety.onclick = function() {
  s_news.style.display = "block";
  $('.AddNew1').click(function() {
    var row = $(this).closest('tr').clone();
    row.find('input').val('');
    $(this).closest('tr').after(row);
    $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
  });

  $('table').on('click', '.RemoveRow', function() {
    $(this).closest('tr').remove();
  });
}

// Get the <span> element that closes the modal
var snews_span = document.getElementsByClassName("s_newsclose")[0];
// When the user clicks on <span> (x), close the modal
snews_span.onclick = function() {
  s_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(s_newsevent) {
  if (s_newsevent.target == s_news) {
    s_news.style.display = "none";
  }
});
///
// Get the  that opens the Quality Internal NewsFeed
var qi_news = document.getElementById('qi_news');
var qualityint = document.getElementById('QualityInt');
qualityint.onclick = function() {
  qi_news.style.display = "block";
  
  $('.AddNew2').click(function() {
    var row = $(this).closest('tr').clone();
    row.find('input').val('');
    $(this).closest('tr').after(row);
    $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
  });

  $('table').on('click', '.RemoveRow', function() {
    $(this).closest('tr').remove();
  });
}

// Get the <span> element that closes the modal
var qinews_span = document.getElementsByClassName("qi_newsclose")[0];
// When the user clicks on <span> (x), close the modal
qinews_span.onclick = function() {
  qi_news.style.display = "none";
}
// Close Safety NewsFeed
window.addEventListener("click", function(qi_newsevent) {
  if (qi_newsevent.target == qi_news) {
    qi_news.style.display = "none";
  }
});
.s_news,
.qi_news {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

.headercolor {
  background-color: rgba(255, 0, 0, 1);
}


/* The Newsfeed Close Button */

.s_newsclose,
.qi_newsclose {
  color: #aaa;
  float: left;
  font-size: 28px;
  font-weight: bold;
}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 style="font-size:1.5rem" id=Safety>Safety</h2>
  <h2 style="font-size:1.5rem" id=QualityInt>Operate</h2>

  <div id="s_news" class="s_news">
    <table>
      <tr>
        <td class=headercolor>ISSUE</td>
        <td class=headercolor>ACTION</td>
        <td class=headercolor>Add/Remove Item</td>
      </tr> <span class="s_newsclose">&times;</span>
      <tr>
        <td><input type='text' value='Add New'></td>
        <td><input type='text' value='Add New'></td>
        <td><input type='button' class='AddNew1' value='Add new item'></td>
      </tr>
    </table>
  </div>

  <div id="qi_news" class="qi_news">
    <table>
      <tr>
        <td class=headercolor>ISSUE</td>
        <td class=headercolor>ACTION</td>
        <td class=headercolor>Add/Remove Item</td>
      </tr> <span class="qi_newsclose">&times;</span>
      <tr>
        <td><input type='text' value='Add New'></td>
        <td><input type='text' value='Add New -->'></td>
        <td><input type='button' class='AddNew2' value='Add new item'></td>
      </tr>
    </table>

  </div>

答案 1 :(得分：0)

检查嵌套在safety.onclick代码块中的代码。 每次点击＆＃34;安全＆＃34;，您将jQuery click()事件处理程序绑定到具有类属性AddNew的所有元素。您可以在自己提供的代码段中自行查看。单击标题，然后立即关闭它。再重复两次。现在，当您单击＆＃34;添加项目＆＃34;按钮，您将看到三个新行显示。

另外，请注意您希望实现的效果对于每个div都是相同的。我建议您在此处使用更多DRY方法来处理代码。考虑一种替代解决方案，其中jQuery事件绑定使用.on()方法，而不是嵌套在vanilla onclick处理程序中。

$('#s_news, #qi_news').on('click', '.AddNew', function() {
    var row = $(this).closest('tr').clone();
    row.find('input').val('');
    $(this).closest('tr').after(row);
    $('input[type="button"]', row)
        .removeClass('AddNew')
        .addClass('RemoveRow')
        .val('Remove item');
});

$('#s_news, #qi_news').on('click', '.RemoveRow', function() {
    $(this).closest('tr').remove();
});

以下是实施添加/删除事件处理代码的示例：https://jsfiddle.net/v5r2f913

对提供的代码示例的一般性评论还有一点：由于您使用的是jQuery，您可能会考虑使用该库的选择器和事件模型，而不是混合使用jQuery和vanilla JavaScript。

相关问题
最新问题