在 JQuery 中单击按钮向表中添加新行

Adding new rows to table on clicking button in JQuery

提问by Crazy Developer

I am pretty new to jquery. I have the following code. Here I want to get new rows in the table by clicking the add button, but I can't get it.,

我对 jquery 很陌生。我有以下代码。在这里我想通过单击添加按钮在表中获取新行，但我无法获取。，

can someone tell me what mistake I have done here?

有人能告诉我我在这里犯了什么错误吗？

<script type="text/javascript">
var $ = jQuery.noConflict();
$("#addrows").click(function () {
  if (document.getElementById("hiddenprice").value == "") {
    imagecounter = 4;
   } else {
   imagecounter = parseFloat(document.getElementById("hiddenprice").value) +1;
   }
  //imagecounter=4;     
  var newImageDiv = $(document.createElement('div'))
   .attr("id", 'add_div' + imagecounter);
  newImageDiv.after().html('<table width="100%" cellpadding="0" 
  cellspacing="0" class="pdzn_tbl1" border="0">' +
  '<tr><td><input type="text" name="rollno<? $i ?>"/></td>' +
  '<td><input type="text" name="firstname<? $i ?>" /></td>' +
  '<td><input type="text" name="lastname<? $i ?>" /></td></tr></table>');

  newImageDiv.appendTo("#addgroup");
  $("tr:last").after(newImageDiv);
  document.getElementById("hiddenprice").value = imagecounter;
  imagecounter++;
});
</script>
<div class="common" style="width:1040px; -overflow-x:scroll; padding: 5px 5px 0 5px;">
  <table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
  <tr>  
    <th>Roll No</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <?php $t_row=3; for($i=1;$i<=$t_row;$i++) {   ?>
  <tr id="rows">
    <div> 
      <td><input type="text" name="rollno<? $i ?>"/></td>
      <td><input type="text" name="firstname<? $i ?>"/></td>
      <td> <input type="text" name="lastname<? $i ?>"/></td>
    </div>
  </tr>
  <? } ?>

  <div id="addgroup"> 
    <div id="add_div1"> </div>
  </div> 
  <table>
    <input type="button" name="add" value="+Add" id="addrows" />
    <input type="hidden" id="hiddenprice" name="hiddenprice" value="3"/> 
  </table>
</div>

Code Formatted & Edit: Code alignments updated and removed unwanted style codes for better readability

代码格式化和编辑：代码对齐更新并删除了不需要的样式代码以提高可读性

回答by Satinder singh

Sample DEMO for Adding new row

添加新行的示例演示

$("#addrows").click(function () {
     $("#mytable").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' + $(this).html() + '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });
});

Updated: Here div close at wrong place, it should end before tr close, may be thats the error

更新：这里 div 在错误的地方关闭，它应该在 tr 关闭之前结束，可能是错误

<tr id="rows">
<div style="padding-left: 5px"> 
<td style="padding:5px;" > <input type="text" name="rollno<? $i ?>"  /> </td>
<td style="padding:5px;"> <input type="text" name="firstname<? $i ?>" /> </td>
<td style="padding:5px;"> <input type="text" name="lastname<? $i ?>" /> </td>
</div> // right
</tr>
</div> // wrong

UPDATED DEMO 2

更新的演示 2

回答by z--

Have a look at Add table row in jQuery

看看在 jQuery中添加表格行

which gives the solution

这给出了解决方案

$('#maintable tr:last').after('<tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>');

As explained herea solution with afteris to be preferred over append.

正如这里所解释的， 解决方案after优于append。

Notes

笔记

• Do not mix accessing DOM elements with jquerywith the approach with getElementById.
• As you are using jQuery there is no need to do your own AJAX function.

• 不要将访问 DOM 元素jquery与getElementById.
• 当您使用 jQuery 时，无需执行您自己的 AJAX 函数。

Demo code

演示代码

http://jsfiddle.net/A5dT6/1/

http://jsfiddle.net/A5dT6/1/

回答by rajesh kakawat

try something like this,FIDDLE

尝试这样的事情，FIDDLE

    $(function () {
        $("#addRows").click(function () {
            $("#maintable").append("<tr> <td> New Row</td> </tr>")
        });
    })

回答by Hien Nguyen

I contribute another solution with a sample append tr to table use .after()method and string interpolationfor updating row index.

我提供了另一个解决方案，其中包含一个示例 append tr to table use.after()方法和interpolation用于更新行索引的字符串。

let rowIndex = 0;

$("#addrows").click(function () {

  $('#maintable tr:last').after(`<tr><td><input type="text" name="rollno${rowIndex++}"/></td>
      <td><input type="text" name="firstname${rowIndex++}"/></td>
      <td> <input type="text" name="lastname${rowIndex++}"/></td></tr>`);
});

let rowIndex = 0;
  
$("#addrows").click(function () {
  
  $('#maintable tr:last').after(`<tr><td><input type="text" name="rollno${rowIndex++}"/></td>
      <td><input type="text" name="firstname${rowIndex++}"/></td>
      <td> <input type="text" name="lastname${rowIndex++}"/></td></tr>`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="common" style="width:1040px; -overflow-x:scroll; padding: 5px 5px 0 5px;">
  <table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
  <tr>  
    <th>Roll No</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
 
  <div id="addgroup"> 
    <div id="add_div1"> </div>
  </div> 
  <table>
    <input type="button" name="add" value="+Add" id="addrows" />
    <input type="hidden" id="hiddenprice" name="hiddenprice" value="3"/> 
  </table>
</div>

回答by Ajinder Singh

try the Below Code

试试下面的代码

 $("#addrows").click(function(){  $("#maintable").append("<tr> <td> Data Here</td> </tr>") });

回答by Iren Patel

Try this code add new row dynamically in table using jquery.

试试这个代码使用 jquery 在表中动态添加新行。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
   <script type="text/javascript" language="javascript">

   var indexValue = 0;
   function addRow(){
        var test ='<tr><td>a</td></tr>';
        $("#applyTable").append(test);
        }
      </script>
</head>
<div>
<table class="myTable" border="1px" align="center" style="width:100px;"  >
        <tbody id="applyTable"> 
        </tbody>
</table>
</div>
<div > 
<input type="button" value="Add" border="1px" onclick="addRow()" /><br/><br/>
</div>
<body>
</body>
</html>

回答by defau1t

I think the problem is as you havent added the jQuery code to the file, I just see the following two script blocks:

我认为问题在于您尚未将 jQuery 代码添加到文件中，我只看到以下两个脚本块：

<script src="resources/scripts/jquery.ui.effect.js"></script>
<script src="resources/scripts/jquery.ui.effect-explode.js"></script>

and they don't seem to be having raw jQuery.

而且他们似乎没有原始的 jQuery。

Try adding the following line too.

也尝试添加以下行。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

回答by xyz

You can use

您可以使用

$('#maintable tr:last').after('<tr><td style="padding:5px;"> Add_Content_Here </td></tr>');