Я пытаюсь удалить клонированные строки, я получил его для удаления, но он удаляет только одну строку, а не группу строк. Я пытаюсь сделать первый набор, который не сможет удалить, но как только клонированные строки смогут удалить клонированные строки. Может кто-то, пожалуйста, помогите мне, я все еще изучаю 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[]" />
<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="μg">μg</option>
<option value="ml">ml</option>
<option value="Drops">Drops</option>
<option value="Amps">Amps</option>
<option value="Puffs">Puffs</option>
</select>
<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>
<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/
Любая помощь будет действительно оценена.
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[]" />
<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="μg">μg</option>
<option value="ml">ml</option>
<option value="Drops">Drops</option>
<option value="Amps">Amps</option>
<option value="Puffs">Puffs</option>
</select>
<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>
<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>