CODEWITHSUNDEEP
jquery
itjuba
itjuba

Reputation: 528

How to check if the last TD contain only one input not empty?

I try to remove a row in table. So I check if the last td has only one input field not empty and its not the first row then I delete this row

How to do it using jQuery?

code :

var $tbody = $("#table2 tbody")
$(document).ready(function(){

    $("#done").on("click", function() {

        var $last = $tbody.find('tr:last');
        if($last.is(':first-child')){
            console.log('not last');
        }else {

            if($last.is('tr td:last empty')){
                console.log('empty');
                $last.remove()
            }
            console.log('yes last !');

        }

    });
});

for the select field :

 <table class="table" id="tablefour">


             <thead class=" text-primary"  >
                     ..........

                      </thead>

                      </thead>
                    <tbody>
    <button id="done1" class="btn btn-primary" type="submit">Update</button>
    <tr > 
        <td> 
            <input type="hidden" name="form-0-id" value="194" id="id_form-0-id">
            <input type="text" name="form-0-Designation" value="des 2" class="form-control" id="id_form-0-Designation">
        </td>
        <td>  
            <input type="text" name="form-0-Prix_Unitaire" value="1.00" class="na form-control" id="id_form-0-Prix_Unitaire">
        </td>
        <td>     
            <select name="form-0-Command" id="id_form-0-Command">
  <option value="">---------</option>
  <option value="54" selected>54</option>
</select>
        </td>
        <td> 
            <input type="text" name="form-0-Quantite" value="1" class="qu l form-control" id="id_form-0-Quantite">
        </td>
        <td> 
            <input type="text" name="form-0-Montant_HT" value="1.00" class="form-control" id="id_form-0-Montant_HT">
        </td>
        <td>
            <input type="text" name="form-0-Montant_TVA" value="1.00" class="form-control" id="id_form-0-Montant_TVA">
        </td>
        <td>  
            <input type="text" name="form-0-Montant_TTC" value="1.00" class="form-control" id="id_form-0-Montant_TTC">

        </td>
        <td>
            <input type="checkbox" name="form-0-DELETE" id="id_form-0-DELETE">
        </td>
    </tr>
    <tr >

i tried this :

var $tbody = $("#tablefour tbody")
$(document).ready(function() {
  $("#done1").on("click", function() {
    var $last = $tbody.find('tr:last');
    if ($last.is(':first-child')) {
      console.log('not last');
    } else {
      var inputs = $last.find("select");
      if (inputs.length == 1 && inputs.val() == "") {
        console.log('empty');
        $last.remove()
      } else {
        console.log("Not empty");
      }
      console.log('yes last !');
    }
  });
});

Upvotes: 1

Views: 648

Answers (1)

Barmar
Barmar

Reputation: 781380

$last.is() tests whether the last <tr> is equal to the elements found by the selector, but that's selecting the contents of a td, so they can't be equal.

Use .find() to find the inputs in the last row. Then you can get the count with .length and see if it's empty with .val().

var $tbody = $("#table2 tbody")
$(document).ready(function() {
  $("#done").on("click", function() {
    var $last = $tbody.find('tr:last');
    if ($last.is(':first-child')) {
      console.log('not last');
    } else {
      var inputs = $last.find("input");
      if (inputs.length == 1 && inputs.val() == "") {
        console.log('empty');
        $last.remove()
      } else {
        console.log("Not empty");
      }
      console.log('yes last !');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table2">
  <tbody>
    <tr>
      <td>Row 1</td>
      <td><input></td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td><input></td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td><input></td>
    </tr>
  </tbody>
</table>
<button id="done">Remove Last row</button>

var $tbody = $("#tablefour tbody")
$(document).ready(function() {
  $("#done1").on("click", function() {
    var $last = $tbody.find('tr:last');
    if ($last.is(':first-child')) {
      console.log('not last');
    } else {
      var inputs = $last.find("select");
      if (inputs.length == 1 && inputs.val() == "") {
        console.log('empty');
        $last.remove()
      } else {
        console.log("Not empty");
      }
      console.log('yes last !');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tablefour">
  <tbody>
    <tr>
      <td>
        <input type="hidden" name="form-0-id" value="194" id="id_form-0-id">
        <input type="text" name="form-0-Designation" value="des 2" class="form-control" id="id_form-0-Designation">
      </td>
      <td>
        <input type="text" name="form-0-Prix_Unitaire" value="1.00" class="na form-control" id="id_form-0-Prix_Unitaire">
      </td>
      <td>
        <select name="form-0-Command" id="id_form-0-Command">
          <option value="">---------</option>
          <option value="54" selected>54</option>
        </select>
      </td>
      <td>
        <input type="text" name="form-0-Quantite" value="1" class="qu l form-control" id="id_form-0-Quantite">
      </td>
      <td>
        <input type="text" name="form-0-Montant_HT" value="1.00" class="form-control" id="id_form-0-Montant_HT">
      </td>
      <td>
        <input type="text" name="form-0-Montant_TVA" value="1.00" class="form-control" id="id_form-0-Montant_TVA">
      </td>
      <td>
        <input type="text" name="form-0-Montant_TTC" value="1.00" class="form-control" id="id_form-0-Montant_TTC">

      </td>
      <td>
        <input type="checkbox" name="form-0-DELETE" id="id_form-0-DELETE">
      </td>
    </tr>
    <tr>
      <tr>
        <td>
          <input type="hidden" name="form-0-id" value="194" id="id_form-0-id">
          <input type="text" name="form-0-Designation" value="des 2" class="form-control" id="id_form-0-Designation">
        </td>
        <td>
          <input type="text" name="form-0-Prix_Unitaire" value="1.00" class="na form-control" id="id_form-0-Prix_Unitaire">
        </td>
        <td>
          <select name="form-0-Command" id="id_form-0-Command">
            <option value="">---------</option>
            <option value="54" selected>54</option>
          </select>
        </td>
        <td>
          <input type="text" name="form-0-Quantite" value="1" class="qu l form-control" id="id_form-0-Quantite">
        </td>
        <td>
          <input type="text" name="form-0-Montant_HT" value="1.00" class="form-control" id="id_form-0-Montant_HT">
        </td>
        <td>
          <input type="text" name="form-0-Montant_TVA" value="1.00" class="form-control" id="id_form-0-Montant_TVA">
        </td>
        <td>
          <input type="text" name="form-0-Montant_TTC" value="1.00" class="form-control" id="id_form-0-Montant_TTC">

        </td>
        <td>
          <input type="checkbox" name="form-0-DELETE" id="id_form-0-DELETE">
        </td>
      </tr>
  </tbody>
</table>

<button id="done1">Delete Last Row</button>

Upvotes: 1

Related Questions