Grab First Cell Value From Table-CodePudding

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 ></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" >
  <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 ></a>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <div ></div>
      </td>
    </tr>
  </tfoot>
</table>

CodePudding user response：

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 ></div></td></tr>`);
});

CodePudding user response：

$('td').each(
    function(i){
        $(this).text(i);
    });

$('td').click(
    function(){
        var verticSize = $('tr:first td').eq($(this).index()).text(),
            horizSize = $(this).prevAll('td:last').text();
        
        alert(parseInt(verticSize)   parseInt(horizSize));
    });

td {
    padding: 0.3em 0.5em;
    border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CodePudding user response：

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 ></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" >
  <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 ></a>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <div ></div>
      </td>
    </tr>
  </tfoot>
</table>