Удалить группу клонированных строк

0

Я пытаюсь удалить клонированные строки, я получил его для удаления, но он удаляет только одну строку, а не группу строк. Я пытаюсь сделать первый набор, который не сможет удалить, но как только клонированные строки смогут удалить клонированные строки. Может кто-то, пожалуйста, помогите мне, я все еще изучаю javascript и jquery.

Html:

<table align="left" id="show2">
<tr>
    <td align="left" colspan="2" align="center">
        <div class="employmentHistory">
            <table width="700px" class="employmentHistoryForm" cellspacing="0" cellpadding="0">
                <tr>
                    <td align="left">
                        <table align="left" style="padding-left: 50px;">
                            <tr class="row">
                                <td class="text-fields" align="right">Drug name (tradename)</td>
                                <td class="text-fields" align="left">
                                    <input class="admin-input" type="text" name="drug_name[]" />
                                    <span
                                        style="cursor: pointer; color: #007FC6; font-weight: bold;"
                                        class="deleteThisRow" value="Delete">Delete</span>
                                </td>
                            </tr>
                            <tr class="row2">
                                <td class="text-fields" align="right">Dose value</td>
                                <td class="text-fields" align="left">
                                    <input style="width: 60px;" class="admin-input" type="text" name="dose_value[]" />&nbsp;
                                    <select style="width: 70px;" class="select-input" name="dose[]">
                                        <option selected value="0">Dose</option>
                                        <option value="g">g</option>
                                        <option value="Mg">Mg</option>
                                        <option value="&mu;g">&mu;g</option>
                                        <option value="ml">ml</option>
                                        <option value="Drops">Drops</option>
                                        <option value="Amps">Amps</option>
                                        <option value="Puffs">Puffs</option>
                                    </select>&nbsp;
                                    <select style="width: 95px;" class="select-input" name="frequency[]">
                                        <option selected value="0">Frequency</option>
                                        <option value="Daily">Daily</option>
                                        <option value="Bd">Bd</option>
                                        <option value="Tds">Tds</option>
                                        <option value="Qid">Qid</option>
                                        <option value="4 hourly">4 hourly</option>
                                        <option value="Nocte">Nocte</option>
                                        <option value="Alternate day">Alternate day</option>
                                        <option value="Weekly">Weekly</option>
                                    </select>&nbsp;
                                    <select style="width: 70px;" class="select-input" name="route[]">
                                        <option selected value="0">Route</option>
                                        <option value="PO">PO</option>
                                        <option value="PR">PR</option>
                                        <option value="S/C">S/C</option>
                                        <option value="IM">IM</option>
                                        <option value="IV">IV</option>
                                        <option value="Eyes">Eyes</option>
                                        <option value="Nebs">Nebs</option>
                                    </select>
                                </td>
                            </tr>
                            <tr class="row4">
                                <td class="text-fields" align="right"></td>
                                <td class="text-fields" align="left">
                                    <input type="radio" name="chronic_l_duration[]" value="Chronic" />Chronic
                                    <br />
                                    <input type="radio" name="chronic_l_duration[]" value="Limited duration" />Limited duration
                                    <br />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>
<tr>
    <td align="left" colspan="2" style="padding-left: 300px;"><span style="cursor: pointer; color: #007FC6; font-weight: bold;" id="btnAddMore" value="add more">Add another Medication</span>

    </td>
</tr>

Javascript:

    $(document).ready(function () {
    var clonedRow = $('.row').clone().html();
    var appendRow = '<tr class = "row">' + clonedRow + '</tr>';

    $('#btnAddMore').click(function () {
        $('.employmentHistoryForm tr:last').after(appendRow);
    });

    $('.deleteThisRow').live('click', function () {
        var rowLength = $('.row').length;

        if (rowLength > 1) {
            deleteRow(this);
        } else {
            $('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);
        }
    });

    function deleteRow(currentNode) {
        $(currentNode).parent().parent().remove();
    }
});

$(document).ready(function () {

    var clonedRow = $('.row2').clone().html();
    var appendRow = '<tr class = "row2">' + clonedRow + '</tr>';

    $('#btnAddMore').click(function () {
        $('.employmentHistoryForm tr:last').after(appendRow);
    });

    $('.deleteThisRow').live('click', function () {
        var rowLength = $('.row2').length;

        if (rowLength > 1) {
            deleteRow(this);
        } else {
            $('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);
        }
    });

    function deleteRow(currentNode) {
        $(currentNode).parent().parent().remove();
    }
});

$(document).ready(function () {

    var clonedRow = $('.row4').clone().html();
    var appendRow = '<tr class = "row4">' + clonedRow + '</tr>';
    var counter = 0;
    $('#btnAddMore').click(function () {

        $('.employmentHistoryForm tr:last').after(appendRow);
        counter++;
        $('.employmentHistoryForm tr:last input[type="radio"]').attr('name', 'chronic_l_duration[' + counter + ']');
    });


    $('.deleteThisRow').live('click', function () {
        var rowLength = $('.row4').length;

        if (rowLength > 1) {
            deleteRow(this);
        } else {
            $('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);
        }
    });

    function deleteRow(currentNode) {
        $(currentNode).parent().parent().remove();
    }
});

Я добавил свой код для скрипки: http://jsfiddle.net/eBrTa/3/

Любая помощь будет действительно оценена.

  • 1
    Не могу ссылку на скрипку!
  • 2
    Сам jsfiddle, кажется, не работает!
Показать ещё 1 комментарий
Теги:

1 ответ

0
Лучший ответ

Попробуйте это: - http://jsfiddle.net/eBrTa/4/

JS: -

$(document).ready(function () {
    var appendRow;

    $('#btnAddMore').click(function () {
        appendRow = $('.myGroup').clone();
        $(appendRow).insertAfter($('.myGroup:last'));
    });

    $('.deleteThisRow').live('click', function () {
        var rowLength = $('.row').length;

        if (rowLength > 1) {
            deleteRow(this);
        } else {
            $('.employmentHistoryForm tr:last').after(appendRow);
            deleteRow(this);
        }
    });

    function deleteRow(currentNode) {
        $(currentNode).closest(".myGroup").remove();
    }
});

HTML: -

<table align="left" id="show2">
    <tr>
        <td align="left" colspan="2" align="center">
            <div class="employmentHistory">
                <table width="700px" class="employmentHistoryForm" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="left">
                            <table class="myGroup" align="left" style="padding-left: 50px;">
                                <tr class="row">
                                    <td class="text-fields" align="right">Drug name (tradename)</td>
                                    <td class="text-fields" align="left">
                                        <input class="admin-input" type="text" name="drug_name[]" />
                                        <span
                                            style="cursor: pointer; color: #007FC6; font-weight: bold;"
                                            class="deleteThisRow" value="Delete">Delete</span>
                                    </td>
                                </tr>
                                <tr class="row2">
                                    <td class="text-fields" align="right">Dose value</td>
                                    <td class="text-fields" align="left">
                                        <input style="width: 60px;" class="admin-input" type="text" name="dose_value[]" />&nbsp;
                                        <select style="width: 70px;" class="select-input" name="dose[]">
                                            <option selected value="0">Dose</option>
                                            <option value="g">g</option>
                                            <option value="Mg">Mg</option>
                                            <option value="&mu;g">&mu;g</option>
                                            <option value="ml">ml</option>
                                            <option value="Drops">Drops</option>
                                            <option value="Amps">Amps</option>
                                            <option value="Puffs">Puffs</option>
                                        </select>&nbsp;
                                        <select style="width: 95px;" class="select-input" name="frequency[]">
                                            <option selected value="0">Frequency</option>
                                            <option value="Daily">Daily</option>
                                            <option value="Bd">Bd</option>
                                            <option value="Tds">Tds</option>
                                            <option value="Qid">Qid</option>
                                            <option value="4 hourly">4 hourly</option>
                                            <option value="Nocte">Nocte</option>
                                            <option value="Alternate day">Alternate day</option>
                                            <option value="Weekly">Weekly</option>
                                        </select>&nbsp;
                                        <select style="width: 70px;" class="select-input" name="route[]">
                                            <option selected value="0">Route</option>
                                            <option value="PO">PO</option>
                                            <option value="PR">PR</option>
                                            <option value="S/C">S/C</option>
                                            <option value="IM">IM</option>
                                            <option value="IV">IV</option>
                                            <option value="Eyes">Eyes</option>
                                            <option value="Nebs">Nebs</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr class="row4">
                                    <td class="text-fields" align="right"></td>
                                    <td class="text-fields" align="left">
                                        <input type="radio" name="chronic_l_duration[]" value="Chronic" />Chronic
                                        <br />
                                        <input type="radio" name="chronic_l_duration[]" value="Limited duration" />Limited duration
                                        <br />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td align="left" colspan="2" style="padding-left: 300px;"><span style="cursor: pointer; color: #007FC6; font-weight: bold;" id="btnAddMore" value="add more">Add another Medication</span>

        </td>
    </tr>
</table>
  • 0
    Спасибо большое за вашу помощь. То, как вы это сделали, работает, но как только вы клонируете одну группу и снова нажимаете кнопку добавления, она добавляет две группы. Похоже, он снова клонирует все клонированные группы.
  • 0
    В том-то и дело, что он не работает правильно, есть ли способ сделать его не клонированным, уже клонированными группами, поскольку он клонирует уже клонированную группу. Спасибо за помощь мне.
Показать ещё 4 комментария

Ещё вопросы

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