Question

我想在文本框中将第一行复制到同一个表中多次。

<table id='table1'>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr id="row">
    <td>1</td><td>2</td><td>3</td>
  </tr>
<table>

<input id="Button1" type="button" value="button" onclick="showRow()"/>
<input id="Text1" type="text" />

<script>
  function showRow() {
    var header = Array();    
    $("#row").each(function (i) {
      header[i] = $(this).text();
    })
    alert(header);
  }
</script>

所以我创建了第一行的数组，当您单击按钮时会发出警报。我的问题的一个例子：

如果我在文本框中键入5并单击按钮，表格应如下所示：
ABC
123
123
123
123
123

这可能吗？

Answer 1

我已经创建了课程row而不是id，因此我们可以定位它（clone()无论如何都会阻止重复的id。）

您可以将该行存储为jQuery对象，然后使用for()循环来克隆该对象并将其追加。使用循环中文本框中输入的值：

var $tbl = $('#table1'), origRow = $tbl.find('.row').first();
$('#Button1').on('click', function(){
   var num = $('#Text1').val();
   $tbl.find('.row').remove();
   for(i=0; i<num; i++){
       var newRow = origRow.clone();
       $tbl.append(newRow);        
   }
});

JSFiddle

我不确定你是否希望每次都清空表，或者只是将行添加到最后。如果您希望将行添加到结尾，只需删除$tbl.find('.row').remove();行。

Answer 2

它是，只是将文本框val（）或值解析为int，并将for（）循环解析为该数字

Answer 3

使用jquery有很多方法可以做到这一点。看看这些jQuery函数：

   clone()
   appendTo()
   insertAfter()

Answer 4

LIVE DEMO
试试这个：将您的行更改为类。

HTML：

<table id='table1'>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr class="row">
    <td>1</td><td>2</td><td>3</td>
  </tr>
<table>

<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />

JQUERY：

 $('#Button1').on('click',function(e) {
        limit = $("#Text1").val();     
        for(i=0;i<parseInt(limit);i++)  {
          strText =  $(".row").first().clone();
          strText.appendTo("#table1");
        }
    });

Answer 5

你可以尝试这个：

逻辑很简单：从文本框中获取计数，不创建行计数，并在表的最后一行之后追加该行。 $('#row').html()将给出第一行的内部元素。

<script>
  function showRow() {
    var i, num = $('#Text1').val();    
    for(i=0; i<num; i++){      
      $('#table1 > tbody:last').append('<tr id=row'+i+1+'>'+$('#row').html()+'</tr>');
    }
  }
</script>

<强> DEMO Link

Answer 6

试试这个Link

  <table id='table1'>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr class="row">
    <td>1</td><td>2</td><td>3</td>
  </tr>
<table>

<input id="Button1" type="button" value="button" onclick="showRow()"/>
<input id="Text1" type="number" />



$(document).ready(function () {
     $('#Button1').click(function(){
        var num = $('input[id="Text1"]').val();
            alert(num);
            for(var i=0;i<num;i++){
            $('table[id="table1"]').append(' <tr class="row"><td>1</td><td>2</td><td>3</td></tr>');

        }
        });
    });

从文本框值向html表添加行

6 个答案: