在jquery中单击按钮的表上添加新行

2018-06-07 12:24:10

我对jquery很新，我有以下代码。在这里我想在表格上点击添加按钮来获得新的行..但我不能得到它。，

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Adding Next Rows </title>
<link rel="stylesheet" href="resources/css/jquery.ui.all.css">
<script src="resources/scripts/jquery.ui.effect.js"></script>
<script src="resources/scripts/jquery.ui.effect-explode.js"></script>

<style>
h3
{
color:#0000FF;
display:inline-block;
}
.pdzn_tbl1 th
{
    background:#DFDFDF;
    border:#D6D6D6 1px solid;
}

.pdzn_tbl1 td
{
    border-right:#729111 1px solid;
    border-bottom:#729111 1px solid;
    padding-top: 5px;
}
</style>

</head>
<body>
<h3> Adding Next Rows </h3>
<script type="text/javascript">

function ajax()
{
    if (window.XMLHttpRequest)
    {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
    alert("Your browser does not support XMLHTTP!");
    return;
    }

}   

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);

         /*onchange="return fn_productname(this.value,'prdname'+imagecounter+'')"*/

    newImageDiv.after().html('<table width="100%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="0">'+
                        '<tr>'+
                        '<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>'+'</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 align="center"> Roll No </th>
        <th align="center"> First Name </th>
        <th align="center"> Last Name </th>
</tr>
<?php
$t_row=3;
for($i=1;$i<=$t_row;$i++) 
        {
        ?>
<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>
</tr>
</div>
<? } ?>
<div id="addgroup"> 
<div id="add_div1"> </div>
</div> <table>
&nbsp; 
<br />
<input type="button" name="add" value="+Add" id="addrows" style="color:#3300FF; font-size:16px; " />
                <input type="hidden" id="hiddenprice" name="hiddenprice" value="3"/> </table>
</div>

</body>
</html>

提前致谢..！！！！

用于添加新行的示例演示

$("#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);
         }
     });
});

更新：这里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

更新的演示2

看看在jQuery中添加表格行

这给出了解决方案

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

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

笔记

不要使用getElementById方法混合访问DOM元素和jquery 。

当你使用jQuery时，不需要做你自己的AJAX功能。

演示代码

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

尝试像这样，FIDDLE

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

链接地址: http://www.djcxy.com/p/22985.html

上一篇: adding new rows to table on clicking button in jquery

下一篇: How do I add an extra html table row upon button click using jQuery?