jQuery save/edit button action only when button has a specific ID

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.

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

Please add a screen shot of css counter. and you can only get text by `jquery` when count is in between `1` . — Noman, Feb 02 '16 at 07:48
Instead of closest('tr') ...u try go forward from td `var ino = currentTD.find('span.sl').text(); console.log(ino);` — narasimharaosp, Feb 02 '16 at 07:55
I think you should research on `CSSPrimitiveValue.getCounterValue()` ... — dvenkatsagar, Feb 02 '16 at 07:59
I did some testing in jsfiddle. First, the variable "sl" is never defined in your script, so you'd get an error. Try console.log(ino); — daniel, Feb 02 '16 at 08:10
Secondly, check if your HTML code is valid. It appears that .closest('tr') will fail if is not inside a . Otherwise, there's no problem with your code. — daniel, Feb 02 '16 at 08:12
but sl is not a variable in your script. You need something like `var sl = $(this).closest('tr').find("span.sl")` — daniel, Feb 02 '16 at 08:14
var ino = $(this).closest('tr').find("span.sl").text(); @daniel I dont need a sl in the script. sl is the name of the span — Akhil K PAULOSE, Feb 02 '16 at 08:16

score 0 · Answer 1 · edited May 23 '17 at 11:59

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.

When I generate using JS, I would need to create the script that would handle the rearrangement of rows when a row is created or deleted. CSS counters does that automatically. Would you help me in developing a script that would handle row rearrangement in case row is deleted? — Akhil K PAULOSE, Feb 02 '16 at 10:10
Can you provide us the function related to the "add row"? If possible kindly make it as a jsfiddle... — dvenkatsagar, Feb 02 '16 at 17:12

score 0 · Answer 2 · answered Feb 02 '16 at 08:57

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function () {
        //$("#dvTable").hide();
        $("#btnGenerate").click(function () {
            var iCounter = $('#sample_editable_1 tbody tr').length + 1;



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



            $('#sample_editable_1 tbody').append(szTr);

        });

        $('#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();

            alert(ino)

        });

    });



</script>
</head>
<body>





    Name:<input type="text" id="ename" value="Name"/><br />
    Id: <input type="text" id="eid" value="new_id"/><br />
    Des <input type="text" id="desc" value="description"/><br />
     <input type="button" value="Generate" id="btnGenerate">

    <div id="dvTable">
    <table id="sample_editable_1">
        <tbody></tbody>


    </table>


    </div>



    <input type="submit" value="SUBMIT">
</body>
</html>

jQuery save/edit button action only when button has a specific ID

HTML TABLE

2 Answers2