Grab First Cell Value From Table - Jquery

user8512043
December 16, 2022
158 views
0 votes
2 Answers

I am stuck into a simple issue. The scenario is I’ve a existing table that’s populated with data. If no data, then counter should start from one or if there’s data then it should capture the last row’s first cell value. I tried with the below:

var id = $(this).closest('table#this-table').find('tr:last td:first').text();
console.log(id);

For some reason, it shows NaN. Here’s the codepen to test

Anything that I missed here? Tried this as well:

parseInt(id);

Adding full code below:

/* Based on http://jsfiddle.net/sqrrt/2/ */

$(document).ready(function() {
  var counter = 1;

  $(".button-add").on("click", function() {
    var id = $(this).closest('table#this-table').find('tr:last td:first').text();
    console.log(id);

    if ($('#this-table tr').length > 1) {
      counter = parseInt(id);
    }

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" name="label' + counter + '"/></td>';
    cols += '<td><input type="text" name="colour' + counter + '"/></td>';

    cols += '<td><div class="button-delete"></div></td>';
    newRow.append(cols);
    $("table.sortable-table").append(newRow);
    counter++;
  });

  $("table.sortable-table").on("change", 'input[name^="price"]', function(event) {

  });


  $("table.sortable-table").on("click", ".button-delete", function(event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('.button-add').attr('disabled', false).prop('value', "Add Row");
  });

  $(".sortable").sortable({

  });
});

@import "compass/css3";
.button-delete {
  background-color: #FFDDDB;
  border: 1px solid grey;
  color: grey;
  height: 1em;
  width: 1em;
  text-align: center;
  line-height: 0.9em;
  border-radius: 0.5em;
  &:before {
    content: "-";
  }
}

.button-add {
  background-color: #E4FFE5;
  border: 1px solid grey;
  color: grey;
  height: 1em;
  width: 1em;
  text-align: center;
  line-height: 0.9em;
  border-radius: 0.5em;
  &:before {
    content: "+";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="this-table" class="sortable-table">
  <thead>
    <tr>
      <td>Label</td>
      <td>Colour</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="label" />
      </td>
      <td>
        <input type="text" name="colour" />
      </td>
      <td>
        <a class="deleteRow"></a>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <div class="button-add"></div>
      </td>
    </tr>
  </tfoot>
</table>

Tags: javascript jquery

Answers

You need the input field

https://codepen.io/mplungjan/pen/dyjbyav

var counter = 0;
$(".button-add").on("click", function() {
  counter = +$("#this-table tr:last-child td:first-child input").val();
  counter++;
  console.log(counter);
  $("table.sortable-table tbody").append(`<tr>
    <td><input type="text" name="label${counter}" value="${counter}"/></td>
    <td><input type="text" name="label${counter}"/></td>
    <td><input type="text" name="colour${counter}"/></td>
    <td><div class="button-delete"></div></td></tr>`);
});

Hope this helps:
You need to get the value of the input field.

var id = $('table tbody > tr:last > td:first > input').val();

Check the full code below:

/* Based on http://jsfiddle.net/sqrrt/2/ */

$(document).ready(function() {
  var counter = 1;

  $("body").on("click", ".button-add", function() {
    var id = $('table tbody > tr:last > td:first > input').val();
    console.log(id)

    if ($('#this-table tr').length > 1) {
      counter = parseInt(id);
    }

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" name="label' + counter + '"/></td>';
    cols += '<td><input type="text" name="colour' + counter + '"/></td>';

    cols += '<td><div class="button-delete"></div></td>';
    newRow.append(cols);
    $("table.sortable-table").append(newRow);
    counter++;
  });

  $("table.sortable-table").on("change", 'input[name^="price"]', function(event) {

  });


  $("table.sortable-table").on("click", ".button-delete", function(event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('.button-add').attr('disabled', false).prop('value', "Add Row");
  });

  $(".sortable").sortable({

  });
});

@import "compass/css3";
.button-delete {
  background-color: #FFDDDB;
  border: 1px solid grey;
  color: grey;
  height: 1em;
  width: 1em;
  text-align: center;
  line-height: 0.9em;
  border-radius: 0.5em;
  &:before {
    content: "-";
  }
}

.button-add {
  background-color: #E4FFE5;
  border: 1px solid grey;
  color: grey;
  height: 1em;
  width: 1em;
  text-align: center;
  line-height: 0.9em;
  border-radius: 0.5em;
  &:before {
    content: "+";
  }
}

  

<table id="this-table" class="sortable-table">
  <thead>
    <tr>
      <td>Label</td>
      <td>Colour</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="label" />
      </td>
      <td>
        <input type="text" name="colour" />
      </td>
      <td>
        <a class="deleteRow"></a>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <div class="button-add"></div>
      </td>
    </tr>
  </tfoot>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

Grab First Cell Value From Table – Jquery

Answers