it-swarm.com.de

Wählen Sie das nächste <td> in einer Tabelle mit jQuery aus

Ich arbeite an einer asp.net mvc 3-Anwendung. Ich baue eine Tabelle dynamisch mit Daten aus der Datenbank. Ich habe einen bestimmten Fall, wenn die dritte Spalte/Zelle einer Zeile ein Dropdown ist:

<select name="YesNoNotApplicable" class="YesNoNotApplicable">
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                            <option value="3">Not Applicable</option>
                        </select>

In diesem Fall bleibt die vierte Spalte/Zelle leer und wenn der Benutzer 3 (Nicht zutreffend) in der vierten Zelle auswählt, sollte ein Textfeld angezeigt werden, in das der Benutzer zusätzliche Informationen schreiben kann. Ich habe schlechte Kenntnisse in JS und jQuery, finde jedoch heraus, wie Sie den ausgewählten Wert aus einem Dropdown-Menü erhalten:

$(document).ready(function () {
        $('.YesNoNotApplicable').change(function () {
            alert($('.YesNoNotApplicable').val());
        });
    });

Stattdessen muss ich nun jedoch die Warnung überprüfen, ob der Wert 3 ist (dies ist der weit entfernte Bereich, in dem ich alleine gehen kann) und ein Textfeld in der nächsten Zelle anzeigen/ausblenden oder anfügen/entfernen oder ob wir in einem DOM sprechen. 

Wie kann ich also zum nächsten mit einem mit class = YesNoNotApplicable navigieren und wie kann ich mit diesem Textfeld am besten umgehen, um es in die Datei zu schreiben, während ich die Tabelle erstelle und dann die Tabelle ein-/ausblenden oder behandeln damit zur Laufzeit und anhängen/entfernen und wie könnte ich das machen?

17
Leron

Wenn Sie stark typisierte Modell- und HTML-Helfer für Ihre Ansicht verwenden, ist es wahrscheinlich besser, ein Eingabeelement zu erstellen, während Sie die Tabelle erstellen. Der Grund ist, dass die Elemente, die Sie mit jQuery erstellen würden, nicht an Ihr Modell gebunden sind.

$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3")
         $(this).closest('td').next('td').find('input').show();
   });
});
47

Innerhalb des change-Callbacks verweist this auf das select-Element. So finden Sie die td, die sie enthält, mit closest und dann die nächste td über next (da Sie wissen, ist die nächste Sache eine td, dies ist eine Tabelle):

var $nextTD = $(this).closest('td').next();

In dem allgemeineren Fall, in dem Sie etwas Ähnliches tun möchten, jedoch nicht in einer Tabelle, und das Geschwister, das Sie finden möchten, möglicherweise mehr als ein Element entfernt ist, können Sie nextAll("selector").first() verwenden. Wenn das, was Sie wollen, das nächste Element ist und Sie sich dessen sicher sind, brauchen Sie nextAll nicht.

11
T.J. Crowder
$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3"){
         $(this).closest('td').next('td').find('input:text').show();
       }
   });
});
2
Mohammad Adil

Sie können auch die siblings() -Methode verwenden, um das nächste td -Tag abzurufen

$(document).ready(function () {
        $('.YesNoNotApplicable').change(function () {
            if($('.YesNoNotApplicable').val() == '3'){
               $(this).closest('td').siblings().find('input').show();
            }
        });
    });
$(document).ready(function () {
        $('.YesNoNotApplicable').change(function () {
            if($('.YesNoNotApplicable').val() == '3'){
               $(this).closest('td').siblings().find('input').show();
            }
        });
    });
#notapplicable{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td><select name="YesNoNotApplicable" class="YesNoNotApplicable">
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                            <option value="3">Not Applicable</option>
                        </select></td>
     <td><input type='text' id='notapplicable' /></td>
  </tr>
  
  
</table>
1
Hien Nguyen

var nextCell = $(this).closest('td').next();

Und Sie können dann mit der nächsten Cel arbeiten.

0
sergioadh