следующий ряд добавляется в одну ячейку

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>

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.

Теги:

3 ответа

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 таблицу и добавлять к ней строки...)

Поделиться
  • 0
    +1, но добавление всей таблицы только для одной строки - это неправильно, Op нужно добавить строку, поэтому добавление tr в maintable является стандартной практикой,
  • 0
    Я согласен на 100% :)
Показать ещё 3 комментария
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);
        }
    });
});
Поделиться
  • 0
    я принимаю это, но я хочу получить вывод о исправлении моего кода .. тер все равно?
  • 0
    @ user2720205: всегда вводите определенную часть кода, которая не работает, потому что ее легко читать другим, так как в них нет необходимости добавлять целую функцию ajax (), просто добавьте addnew row часть кода функциональности addnew row
Показать ещё 5 комментариев
0

[Проверить эту ссылку] [1]

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

Этого вы ожидали?

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню