仅当按钮具有特定ID时，jQuery保存/编辑按钮操作

Question

I have an HTML table(Dynamic) and a save/edit button on each row. On clicking save, the values needs to be collected to jQuery variables and AJAX POSTed to a PHP page. I am able to retrieve the values in 3 Table cells, but being a CSS counter, I am not able to get the value of the Sl:No column. It is important that I get this number.

HTML TABLE

<tr role="row" class="odd">
    <td contenteditable="false" class="sorting_1"><span class="sl"> </span> </td>
    <td contenteditable="false"> <span class="name">Alex Nilson </span></td>
    <td contenteditable="false"><span class="price"> 1234 </span></td>
    <td contenteditable="false"> <span class="qty">1234 </span></td>
    <td><button class="pr_edit" href="javascript:;"> Edit </button></td>
    <td><button class="pr_elete" href="javascript:;"> Delete </button></td>

</tr>

The jQuery function is as follows.

$('#sample_editable_1').on('click', '.pr_edit', function() {
    var currentTD = $(this).parents('tr').find('td');


    var ino = $(this).closest('tr').find("span.sl").text();
    var iname = $(this).closest('tr').find("span.name").text();
    var iprice = $(this).closest('tr').find("span.price").text();
    var iqty = $(this).closest('tr').find("span.qty").text();

});

Following is the CSS code. #sample_editable_1 is the name of the table.

  #sample_editable_1 tbody {
  counter-reset: tablerow;
}
#sample_editable_1 .sorting_1::before {
  counter-increment: tablerow;
  content: counter(tablerow)". ";

}

It all works perfectly except the following trouble.

1. The sl span is a CSS counter. I am not being able to retrieve the value of this SPAN.

Answer 1

Not possible yet in my opinion.

First, the sad truth is that, you might not be able to get the value at all, currently, as :before/:after psuedo-elements are not part of the DOM and accessing them and going in this route is messy one.

You should check these links out, so that you can understand what I mean:

How can I read the applied CSS-counter value?

How to access CSS generated content with JavaScript

Second thing is that there is the CSSPrimitiveValue.getCounterValue() which fairly new to the Javascript and does not have much support yet. You might want to research on that, if you want to proceed in that direction.

Third, I think its best if you go via a javascript approach where you generate the counter values just like the rest of the fields.

Hope it helps.

Update:

Based on the comments, if you want the javascript functionality, you can do something like this: (.pr_add is a button which adds the row)

$(".pr_add").on("click",function(){
  var i = 1;
  $("tr.odd").each(function(){
    $(this).children().find(".sl").html(i);
    i++;
  });
});

What this will do is if you click the add button, it will take all the .sl spans and keep the counter values.

Now if the user clicks the .pr_delete button, then i think you should change the code to something like this:

$('#sample_editable_1').on('click', 'button', function() {
    if($(this).hasClass(".pr_edit")){
      var currentTD = $(this).parents('tr').find('td');
      var ino = $(this).closest('tr').find("span.sl").text();
      var iname = $(this).closest('tr').find("span.name").text();
      var iprice = $(this).closest('tr').find("span.price").text();
      var iqty = $(this).closest('tr').find("span.qty").text();
    }else if($(this).hasClass(".pr_delete")){
      $(this).closest("tr").remove(); // remove the tr
      var i = 1;
      $("tr.odd").each(function(){
        $(this).children().find(".sl").html(i);
        i++;
      });
    }
});

I havent tested this, but check it ... and hope it gives you an idea on how to proceed.