CODEWITHSUNDEEP
jqueryhtml
Crazy Developer
Crazy Developer

Reputation: 105

next row is added into single cell

I have the following code. Here I wants to get new rows in the table on click Add button it works but what my problem is i can get all the text fields into the same cell..

can someone tell me what mistake I have done here?

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

});

here is my jsfiddle page,.

Upvotes: 0

Views: 81

Answers (2)

DrCopyPaste
DrCopyPaste

Reputation: 4117

Here is a fiddle

Where I just made minimum changes to your code, so you can see what is different:

Basically

<div id="addgroup"> was too early on the page (moved it below <table id="maintable") and it was also closed a weird way, containing the closing tag of <table> also.

so that part now looks like this:

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

to make it look like your first row I also added the style setup from your maintable to the other tables you are adding.

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

(Keep in mind though, adding whole tables, most of the time is not very good, better only have 1 table and add rows to it...)

Upvotes: 1

Satinder singh
Satinder singh

Reputation: 10198

Here the demo

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

Upvotes: 1

Related Questions