J'ai un formulaire comme ci-dessous, ici, je cherche à supprimer la ligne tr si le texte d'entrée et l'option de sélection étaient vides. et afficher la ligne du tableau si l'une des entrées n'était pas vide

Comme vous pouvez le voir, l'entrée n'était pas vide, elle supprimait la ligne entière, il est possible de vérifier que les deux ne sont pas vides puis de supprimer

En utilisant Jquery

Remarque : les lignes du tableau s'ajoutent dynamiquement

$(function(){
$("table#my_form tr td").each(function(){
  $(this).find('input, select').each(function(){
      if($(this).val()==""){
        $(this).closest('tr.table_row').remove();
      }
  })
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">

<table id="my_form">
    <tr class="table_row">
       <td>
            <input type="text" name="company" value="TCS" />
        </td>
        <td>
        	<select name="favorites" id="favorites">
        		<option value="">Select Favorites</option>
        		<option value="chess">Chess</option>
        		<option value="caroms" selected>Caroms</option>
        		<option value="ruby">Ruby</option>
        	</select>
        </td>
    </tr>
        <tr class="table_row">
       <td>
            <input type="text" name="company" value="Deloite" />
        </td>
        <td>
        	<select name="favorites" id="favorites">
        		<option value="">Select Favorites</option>
        		<option value="chess">Chess</option>
        		<option value="caroms">Caroms</option>
        		<option value="ruby">Ruby</option>
        	</select>
        </td>
    </tr>

    <tr class="table_row">
       <td>
            <input type="text" name="company" value="GOOGLE" />
        </td>
        <td>
        	<select name="favorites" id="favorites">
        		<option value="">Select Favorites</option>
        		<option value="chess" selected>Chess</option>
        		<option value="caroms">Caroms</option>
        		<option value="ruby">Ruby</option>
        	</select>
        </td>
    </tr>
</table>
</form>
1
VijayaKrishna 14 mars 2019 à 21:02

2 réponses

Meilleure réponse

Pour vérifier toutes les entrées, vous pouvez essayer quelque chose comme ceci. Comme vous l'avez mentionné, vous ajoutez des lignes de manière dynamique, vous voudriez donc qu'un autre gestionnaire d'événements vérifie à nouveau s'il y a plus de mauvaises lignes. Ce code s'exécuterait une fois au chargement de la page, puis à chaque fois que le bouton '#removeBadRows' est cliqué.

$(function () {
    removeBadRows();

    $(document).on('click', '#removeBadRows', function () {
        removeBadRows();
    });
});

function removeBadRows() {
    $("table#my_form tr").each(function () {
        var badCount = 0;
        var inputLength = $(this).find('input, select').length;
        $(this).find('input, select').each(function () {
            if ($(this).val() == "") {
                badCount++;
            }
        });
        if (badCount == inputLength) {
            $(this).remove();
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="">

    <table id="my_form">
        <tr class="table_row">
            <td>
                <input type="text" name="company" value="test" />
            </td>
            <td>
                <select name="favorites" id="favorites">
                    <option value="">Select Favorites</option>
                    <option value="chess">Chess</option>
                    <option value="caroms" selected>Caroms</option>
                    <option value="ruby">Ruby</option>
                </select>
            </td>
        </tr>
        <tr class="table_row">
            <td>
                <input type="text" name="company" value="" />
            </td>
            <td>
                <select name="favorites" id="favorites">
                    <option value="" selected>Select Favorites</option>
                    <option value="chess">Chess</option>
                    <option value="caroms">Caroms</option>
                    <option value="ruby">Ruby</option>
                </select>
            </td>
        </tr>
        <tr class="table_row">
            <td>
                <input type="text" name="company" value="GOOGLE" />
            </td>
            <td>
                <select name="favorites" id="favorites">
                    <option value="">Select Favorites</option>
                    <option value="chess">Chess</option>
                    <option value="caroms">Caroms</option>
                    <option value="ruby" selected>Ruby</option>
                </select>
            </td>
        </tr>
    </table>
</form>
2
Nicolay 14 mars 2019 à 18:54

Cela pourrait être la méthode la plus simple

$(function(){
  $(document).on('change', '.table_row input', function(e) {
    if($(this).val()==""){
      $(this).closest('.table_row').remove();
    }
  });
});
0
user11150028user11150028 14 mars 2019 à 18:20