Question

我有以下代码。在这里，我想在表格中点击添加按钮它会有效，但我的问题是我可以将所有文本字段放到同一个单元格中。

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

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>

JQuery的：

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 页面。

Answer 1

这里是演示

<强> JSFIDDLE DEMO

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

Answer 2

这是fiddle

我刚刚对代码进行了最少的更改，因此您可以看到不同之处：

基本上

<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个表并添加行...）

Answer 3

[查看此链接] [1]

 [1]: http://jsfiddle.net/4KrwY/47/

这是你期待的吗？

下一行被添加到单个单元格中

3 个答案: