0

我有以下代码。在这里，我想在单击“添加”按钮 时在表格中获取新行，但我的问题是我可以将所有文本字段放入同一个单元格中。

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

HTML：

<h3> Adding Next Rows </h3>

<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>
        </div>
    </tr>
    <? } ?>
    <div id="addgroup">
        <div id="add_div1"></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>

查询：

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

document.getElementById("hiddenprice").value = imagecounter;
imagecounter++;

});

这是我的jsfiddle页面，。

4

2 回答 2

1

这里演示

JSFIDDLE 演示

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

    $("#maintable").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);
        }
    });
});
于 2013-10-01T11:09:28.867 回答
1

这是一个小提琴

我刚刚对您的代码进行了最小的更改，因此您可以看到有什么不同：

基本上

<div id="addgroup">在页面上太早了（将它移到下面<table id="maintable"）并且它也以一种奇怪的方式关闭，包含<table>也的结束标记。

所以这部分现在看起来像这样：

</table>
<div id="addgroup"> 
</div>
     &nbsp; 
<br />

为了使它看起来像您的第一行，我还将您的主表中的样式设置添加到您正在添加的其他表中。

newImageDiv.after().html('<table cellpadding="0" width="50%" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid">'+
                        '<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>');

（但请记住，添加整个表，大多数时候不是很好，最好只有 1 个表并向其中添加行......）

于 2013-10-01T11:29:43.683 回答