jQuery：重新实现＆lt; t to＆lt;去除它们后

发布于 2025-02-09 00:26:17 字数 1959 浏览 0 评论 0原文

我必须使用按钮：添加，我想将s添加到我的（它们来自选定的编号）和 reset 想要删除这些元素的地方。我知道我需要在删除它们后克隆元素，但是如何实现它。我是JS的新手。另外，我可以在此处使用此解决方案切换到复选框：带有复选框和克隆。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>reprex jquery</title> 
    <meta charset="UTF-8">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
        // what´s the value of the integer input?
        var no = 10; 
        let i = 1;
        $("#btn-add").click(function() {
            while (i <= no) {
                $("#tbl tbody").append("<tr><td><input></input></td><td><textarea></textarea></td></tr>");
                $("#tbl input")[i-1].setAttribute("name", "s" + i);                
                $("#tbl input")[i-1].setAttribute("value", i);
                $("#tbl textarea")[i-1].setAttribute("name", "c" + i);  
                ++i;
            }   
        });
    });
 
    $(document).ready(function() { 
        $("#btn-remove").click(function() { 
            $("#tbl tr:gt(0)").remove();
        });
    });   
    </script>
 

</head>
<body>
    <div>
        <button class="btn" id="btn-add" type="button">Add</button>
        <button class="btn" id="btn-remove" type="button">Reset</button>
    </div>

    <table id="tbl">
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

原文

I have to buttons: Add, there I want to add s to my (they come from a selected number) and Reset where want to remove those elements. I know I need to clone DOM elements after removing them, but how do I implement it. I´m relatively new to JS. Alternatively I can switch to a checkbox with this solution here: with checkbox and cloning Any help appreciated - thks.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>reprex jquery</title> 
    <meta charset="UTF-8">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
        // what´s the value of the integer input?
        var no = 10; 
        let i = 1;
        $("#btn-add").click(function() {
            while (i <= no) {
                $("#tbl tbody").append("<tr><td><input></input></td><td><textarea></textarea></td></tr>");
                $("#tbl input")[i-1].setAttribute("name", "s" + i);                
                $("#tbl input")[i-1].setAttribute("value", i);
                $("#tbl textarea")[i-1].setAttribute("name", "c" + i);  
                ++i;
            }   
        });
    });
 
    $(document).ready(function() { 
        $("#btn-remove").click(function() { 
            $("#tbl tr:gt(0)").remove();
        });
    });   
    </script>
 

</head>
<body>
    <div>
        <button class="btn" id="btn-add" type="button">Add</button>
        <button class="btn" id="btn-remove" type="button">Reset</button>
    </div>

    <table id="tbl">
        <thead>
            <tr>
                <th>col1</th>
                <th>col2</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清醇 2025-02-16 00:26:17

您可以通过检查i的状态来添加行。由于它在全球范围内得到了更大的定义，因此随着您继续使用它，价值会改变。考虑以下内容。

$(function() {
  var no = 10;
  var i = 1;
  
  $("#btn-add").click(function() {
    if (i > 1) {
      i = 1;
    }
    while (i <= no) {
      $("#tbl tbody").append("<tr><td><input></input></td><td><textarea></textarea></td></tr>");
      $("#tbl input")[i - 1].setAttribute("name", "s" + i);
      $("#tbl input")[i - 1].setAttribute("value", i);
      $("#tbl textarea")[i - 1].setAttribute("name", "c" + i);
      ++i;
    }
  });

  $("#btn-remove").click(function() {
    $("#tbl tbody tr").remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div>
  <button class="btn" id="btn-add" type="button">Add</button>
  <button class="btn" id="btn-remove" type="button">Reset</button>
</div>

<table id="tbl">
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

在这里，您可以看到<代码> i 在时在中更改。当用户单击“添加”按钮时，您可能需要将其重置。

You can add back your rows by checking the status of i. Since it's defined more globally, as you continue to use it, the value changes. Consider the following.

$(function() {
  var no = 10;
  var i = 1;
  
  $("#btn-add").click(function() {
    if (i > 1) {
      i = 1;
    }
    while (i <= no) {
      $("#tbl tbody").append("<tr><td><input></input></td><td><textarea></textarea></td></tr>");
      $("#tbl input")[i - 1].setAttribute("name", "s" + i);
      $("#tbl input")[i - 1].setAttribute("value", i);
      $("#tbl textarea")[i - 1].setAttribute("name", "c" + i);
      ++i;
    }
  });

  $("#btn-remove").click(function() {
    $("#tbl tbody tr").remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div>
  <button class="btn" id="btn-add" type="button">Add</button>
  <button class="btn" id="btn-remove" type="button">Reset</button>
</div>

<table id="tbl">
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Here you can see that i is changed in your while. You may need to reset it when the User clicks on "Add" button.

回复收藏 0 原文

~没有更多了~