0
Ich baue gerade ein Tabellensystem für eine Krebsumfrage und bin auf ein Problem mit Multiple-Choice-Filtern in einer neuen Tabellenzeile gestoßen. Siehe unten für ein Beispiel.Jquery Mehrfachselektion in wiederholender Tabelle mit Filtern
Bei der Auswahl von Lymphom, Leukämie und andere möchte ich, dass die Tabelle ein zusätzliches Eingabefeld mit jquery erstellt, damit der Benutzer Informationen eingeben kann. Dies funktioniert für die erste Zeile, aber beim Generieren einer zusätzlichen Zeile sind Probleme mit der zusätzlichen Benutzereingabe und die Benutzerauswahl erstellt keine zusätzlichen Auswahlfelder.
Ich habe das Problem in Codepen neu erstellt, jede Hilfe würde massiv geschätzt werden. https://codepen.io/seniorjono/pen/qNYYJp
EDITED: Ich habe das Original Javascript geändert haben, um jetzt nur eine statische Tabellenzeile zu erzeugen, ich die zusätzlichen Eingabefelder aber immer noch nicht meine Jquery bekommen auszulösen. (Siehe 'cancer2' im codepen)
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<ol>
<section class="form_card">
<li>
<h1>Lorem ipsum dolor sit amet</h1></li>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</h2>
<form id="pt_13" name="pt_13">
<div class="content_split" style="width:25%;">
<label class="check check--radio reveal_content">Yes
<input type="radio" id="pt_1_yes" name="radio" />
<div class="check__indicator"></div>
</label>
</div>
<div class="content_split">
<label class="check check--radio hide_content">No
<input type="radio" id="pt_1_no" name="radio" />
<div class="check__indicator"></div>
</label>
</div>
</form>
<div class="hidden_content">
<form id="pt_14" name="pt_14">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="mans">
<tr>
<td>
<div class="select_new" id="pt_13_1">
<label>
<select>
<option selected disabled>Select Relation</option>
<option>Child</option>
<option>Father</option>
<option>Maternal grandfather</option>
<option>Materal grandmother</option>
<option>Paternal grandfather</option>
<option>Paternal grandmother</option>
<option>Sibling</option>
</select>
</label>
</div>
</td>
<td>
<div class="select_new" id="pt_13_2">
<label>
<select class="cancer">
<option selected disabled> Select Cancer</option>
<option value="Bladder">Bladder</option>
<option value="Breast">Breast</option>
<option value="Colorectal">Colorectal</option>
<option value="Kidney">Kidney</option>
<option value="Lung">Lung</option>
<option value="Leukemia">Leukemia</option>
<option value="Lymphoma">Lymphoma</option>
<option value="Melanoma">Melanoma</option>
<option value="MGUS">Multiple Myeloma/MGUS</option>
<option value="Myelodysplasia">Myelodysplasia/myelodysplastic syndrome</option>
<option value="Prostate">Prostate</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</td>
<td class="cancer_optional">
<div class="select_new Leukemia_type">
<label>
<select>
<option selected disabled>Type of Leukemia</option>
<option>Acute myeloid leukemia (AML)</option>
<option>Chronic myeloid leukemia (CML)</option>
<option>Acute lymphocytic leukemia (ALL)</option>
<option>Chronic lymphocytic leukemia (CLL)</option>
<option>Plamsa cell leukemia</option>
<option>Other leukemia type</option>
<option>Unknown leukemia type</option>
</select>
</label>
</div>
<div class="select_new Lymphoma_type">
<label>
<select>
<option selected disabled>Type of Lymphoma</option>
<option>Hodgkin lymphoma</option>
<option>Non-Hodgkin lymphoma (NHL)</option>
<option>Other lymphoma type</option>
<option>Unkown lymphoma type</option>
</select>
</label>
</div>
<div class="Other_type">
<input type="text" class="other_input_text" id="Other_input_box" placeholder="Please Specify" required/>
</div>
</td>
<td><i class="fa fa-trash"></i>
</td>
</tr>
</table>
<div id="addTableRow" class="hidden_content"><i class="fa fa-plus"></i> Add family member</div>
</div>
</form>
</section>
</ol>
JS
// This section toggles the lymphoma/leukemia/other additional details
$('.cancer').change(function() {
if ($(this).val() == 'Leukemia') {
$(this).closest('td').next('td').find('.Leukemia_type').delay(300).slideDown();
$('.Lymphoma_type, #Other_type').slideUp();}
else if ($(this).val() == 'Lymphoma') {
$(this).closest('td').next('td').find('.Lymphoma_type').delay(300).slideDown();
$('.Leukemia_type, .Other_type').slideUp();}
else if ($(this).val() == 'Other') {
$(this).closest('td').next('td').find('.Other_type').delay(300).slideDown();
$('.Leukemia_type, .Lymphoma_type').slideUp();
}
else {
$('.Leukemia_type, .Lymphoma_type, .Other_type').slideUp()
}
});
// Add Row to table with current details duplicated
$(function() {
$('table').on('click', 'tr i', function(e) {
e.preventDefault();
$(this).parents('tr').remove();
});
$("#addTableRow").click(function() {
$("#mans").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);
}
});
});
});
// Reveal this section upon user selection of yes
$(function() {
$('.reveal_content').change(function() {
$(this).parents(".form_card").find(".hidden_content").slideToggle();
});
$('.hide_content').change(function() {
$(this).parents(".form_card").find(".hidden_content").slideToggle();
});
});
ich jede Hilfe dankbar würde, wie ich wirklich ganz im Moment stecke!
gibt es mehrere Probleme mit dem JavaScript-Code. Ihr Problem besteht darin, dass Sie ein Änderungsereignis für dynamisch hinzugefügtes HTML ausführen. Die Lösung des Problems besteht darin, '$ ('. Cancer') zu ändern. Change (function() {' zu '$ ('. Hidden_content'). On ('change', '.cancer', function() { '. Aber das gibt Ihnen nächste Ebene des Problems, weil Sie HTML der vorhandenen Zeile auswählen, um neue – Fr0zenFyr
hinzuzufügen Danke für das Fr0zenFyr, ich werde den Code ändern, so dass es nicht auf die vorhandene
Danke, ich bezog mich auf Ihre Antwort, beachte auch, dass die Frage bearbeitet wurde. – seniorjono
Antwort
Quelle
2016-07-25 13:00:30 Fr0zenFyr
Fr0zenFyr du hast keine Ahnung wie sehr mir das geholfen hat, wenn du interessiert bist, bin ich mehr als glücklich, ein wenig Geld für ein Bier oder einen Kaffee einzustecken, wenn yo Du hast einen Spendenknopf, um dir zu danken, danke, dass du bei mir geblieben bist. – seniorjono
@ user2361983: Danke für deinen Ausdruck :) Ich werde irgendwann ein Bier mit dir nehmen. für jetzt, nur ein upvote auf meine antwort und akzeptieren es als lösung wird tun. Prost! – Fr0zenFyr
Verwandte Themen