Question

我有这样的标记

    <ul>
        <li><a href="#" data-id="3">3</a></li>
        <li><a href="#" data-id="2">2</a></li>
        <li><a href="#" data-id="5">5</a></li>
        <li><a href="#" data-id="7">7</a></li>
    </ul>
    <table id="data">
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>
    <tr>
        <td><input type="text" name="name" class="name"></td>
        <td><input type="text" name="email" class="email"></td>
    </tr>   
    </table>

现在我希望当我点击数据标识为3的标记时，它应该向表中添加3行。如果我点击另一个带有data-id 7的标签，那么它应该向表中添加7行。每个新动作的第一行都是相同的。我的意思是

<tr>
    <th>Name</th>
    <th>Email</th>
</tr>

对于表，

将是常量，其余行将添加名称和电子邮件输入字段。为此我已经使我的jQuery像这样

<script type="text/javascript">
    $(document).ready(function() {
        $('table#data tr:last').hide();
        $('body').on('click', 'li a', function(event) {
            var Parent = $('table#data tr:last');
            event.preventDefault();
            var Number = $(this).attr('data-id');
            console.log(Number);
            for ( i=0; i<Number; i++ ) {
                $(Parent).insertAfter(Parent);
            }
        });
    })

    </script>

但它不起作用。我为this创造了小提琴。那么有人可以告诉我该怎么做吗？任何帮助和建议都会非常明显。感谢

修改

我希望当我点击7时它应该添加7行，因此只能看到7行。但是当我再次点击2行时，它应该只显示2行，依此类推。

Answer 1

试试这个。

$(document).ready(function() {
    $('table#data tr:last').hide();
    $('body').on('click', 'li a', function(event) {
        $('table#data').find('tr.row').remove();
        var Parent = $('table#data tr:last');
        event.preventDefault();
        var Number = $(this).attr('data-id');
        alert(Number);        
        for ( i=0; i<Number; i++ ) {
            $('<tr class="row"><td>Hi</td></tr>').insertAfter(Parent);
        }
    });
})

演示：

http://jsfiddle.net/Ldrsm2cs/2/

Answer 2

1）你的元素是hidden，你应该成为visible 2）你应复制你的元素 3）你应该删除旧行。

$(document).ready(function() {
    $('table#data tr:last').hide();
    $('body').on('click', 'li a', function(event) {
        event.preventDefault();
        var count = $(this).attr('data-id');

        // remove old rows
        $('table#data tr + tr:not(:last)').remove();

        var $node = $('table#data tr:last');
        for ( i=0; i < count; i++ ) {
            $node.clone().show().insertBefore($node);
        }
    });
});

JSFiddle Demo

Answer 3

你正在反复移动最后一行。将其html内容作为文本获取，或者在循环中克隆它：

...
Parent.clone().show().insertAfter(Parent);
...

Answer 4

试试这个：

<ul>
    <li><a href="#" data-id="3">3</a></li>
    <li><a href="#" data-id="2">2</a></li>
    <li><a href="#" data-id="5">5</a></li>
    <li><a href="#" data-id="7">7</a></li>
</ul>
<table id="data">
<tr>
    <th>Name</th>
    <th>Email</th>
</tr>
<tr>
    <td><input type="text" name="name" class="name" /></td>
    <td><input type="text" name="email" class="email" /></td>
</tr>   
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
          $('table#data tr:eq(1)').hide();          
          $('ul').on('click', 'li a', function(event) {
            event.preventDefault();
            var Parent = $('table#data tr:eq(1)');
            $('table#data tr:not(:hidden)').remove();
            var Number = $(this).data('id');
            for ( i=0; i< Number; i++ ) {
                Parent.clone().show().insertAfter(Parent);
            }
        });
    });
</script>

Answer 5

虽然您已经有其他答案，但我认为我建议采用以下方法：

＆＃13;

$('[data-id]').on('click', function(e){
  // preventing any default click actions (page-reloads, hash-changes, etc):
  e.preventDefault();
  
  // caching 'this' (in case of further use):
  var self = this,
      // using native DOM approaches to retrieving the text, rather
      // than using jQuery to perform a simple task:
      textProp = 'textContent' in document ? 'textContent' : 'innerText',
      // finding how many rows we want:
      howMany = parseInt(self[textProp].trim(), 10),
      // retrieving the 'template' row:
      source = $('tbody.template tr'),
      // where we're working on the content:
      content = $('#content'),
      // finding the children already present (if any):
      contentChildren = content.children(),
      // finding how many children (if any) are already present:
      contentChildrenLength = contentChildren.length;
  
  // basically, 'do we need to *add* content:
  if (contentChildrenLength === 0 || contentChildrenLength < howMany) {
    // len is the amount we need to add, if there are zero children we add
    // the full amount requested; otherwise we work out the difference between
    // already-existing content and the number we want, and then add that
    // difference:
    for (var i = 0, len = contentChildrenLength === 0 ? howMany : howMany - contentChildrenLength; i < len; i++) {
      content.append(source.clone(true, true));
    }
  }
  // if we already have the required number of children we just quit:
  else if (contentChildrenLength === howMany) {
    return false;
  }
  // if we have more elements already than we (now) want, we remove
  // the excess:
  else if (contentChildrenLength > howMany) {
    content.children().slice(howMany).remove();
  }
});

＆＃13;

tbody.template {
  visibility: collapse;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" data-id="2">2</a></li>
  <li><a href="#" data-id="3">3</a></li>
  <li><a href="#" data-id="5">5</a></li>
  <li><a href="#" data-id="7">7</a></li>
</ul>
<table id="data">
  <thead>
  	<tr>
    	<th>Name</th>
    	<th>Email</th>
  	</tr>
  </thead>
  <!-- creating a (css-hidden) 'template' row -->
  <tbody class="template">
  	<tr>
        <!-- appended '[]' to the input elements' names (on the assumption you're
             sending this to a server, this is optional (adjust to taste)-->
    	<td><input type="text" name="name[]" class="name" /></td>
    	<td><input type="text" name="email[]" class="email" /></td>
  	</tr>
  </tbody>
  <!-- this is where the content will be appended -->
  <tbody id="content"></tbody>
</table>

＆＃13;

参考文献：

JavaScript的：
jQuery的：
- append()。
- children()。
- clone()。
- has-attribute ([attribute]) selector。
- remove()。
- slice()。

Answer 6

我会推荐jQuery库：relCopy

它可以帮助您轻松克隆/删除一行字段（或其他任何内容）。

如何在点击时添加动态行数？

6 个答案: