jQuery to Javascript conversion

Question

Updated:

I have a JavaScript function inserted in a button. Just want to convert some of its jQuery codes to pure js coz I can't access codes with $(this).

My Code:

function editcheck(el) {
    $(el).parent().parent().remove();
    var tableData = $(el).closest('#paytable tr').children("td").map(function () {
    return $(el).text();
}).get();

$('#checkamount').val($.trim(tableData[1]));
}

code/function before calling the editcheck:

var table = document.getElementById('paytable');
table.innerHTML += '<tr id="checktitle" style="border: none;"><td width="137px"><label>CHECK</label></td>' +
                    '<td class="rowAdd" width="125px">' + checkamounts.join("") + '</td>' +
                    '<td width="127px">' + checknos.join("") + '</td>' +
                    '<td style="display: none">' + dbank.join("") + '</td>' +
                    '<td style="display: none">' + draweedesc.join("") + '</td>' +
                    '<td style="display: none">' + pickercheck.join("") + '</td>' +
                    '<td><button title="Edit" onclick="editcheck(this)" type="button" style="width: 30px; height: 18px"><img src="images/editimg.png" width="13" height="13"></button></td>';

P.S I can't use $("#elementid").click(function() because the line will exist after appending it.

You can do onclick="editcheck.call(this)" Also instead of doing .parent().parent() you could just do $(this).closest('tr') — PSL
– PSL, Commented Dec 3, 2013 at 3:25
"Just want to convert some of its jQuery codes to pure js" : JQuery is just pure JS code... — user2196728
– user2196728, Commented Dec 3, 2013 at 3:26
@user2196728 - come on, you know what they meant. They meant no use of jQuery. — jfriend00
– jfriend00, Commented Dec 3, 2013 at 3:28
It is clear the OP asks how to make editCheck() work without jQuery even though that won't solve their actual problem. It appears the reason they are asking for that is because they aren't passing this properly to their inline event handler which does not require or even benefit from converting the jQuery to plain javascript. I'd say that Arun's answer solves the OP's issue without removing the jQuery. This is a classic example of a question asking how to do what they think is the solution when they really should have just described the problem and asked for solutions to the problem. — jfriend00
– jfriend00, Commented Dec 3, 2013 at 3:45
In this case, what the OP asked for is not an answer to their actual problem. — jfriend00
– jfriend00, Commented Dec 3, 2013 at 3:46

Arun P Johny · Accepted Answer · 2013-12-03 03:58:43Z

1

When you invoke editcheck in the inline handler this inside it refers to the window object

You can pass a custom execution context using .call() like editcheck.call(this)

<button title="Edit" onclick="editcheck.call(this)" style="width: 30px; height: 18px">

or pass the clicked element reference as a argument like

<button title="Edit" onclick="editcheck(this)" style="width: 30px; height: 18px">

then

function editcheck(el) {
    var $tr = $(el).closest('tr');
    var tableData = $tr.children("td").map(function () {
        return $(this).text();
    }).get();
    $tr.remove();
    $('#checkamount').val($.trim(tableData[1]));
}

Solution Use Event Delegation

<button title="Edit" class="edit" type="button" style="width: 30px; height: 18px"><img src="images/editimg.png" width="13" height="13"></button>

then

jQuery(function () {
    $('#Paytable').on('click', '.edit', function () {
        var $tr = $(this).closest('tr').remove();
        $('#checkamount').val($.trim($tr.find('td:first').text());
    });
})

edited Dec 3, 2013 at 3:58

answered Dec 3, 2013 at 3:25

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

myRM Over a year ago

the line with remove() works, but the var tableData is not. What do you think is the problem?

myRM Over a year ago

I have the code passing the value to an element input. $('#checkamount').val($.trim(tableData[1])); do you think this is the problem?

Arun P Johny Over a year ago

The problem is you are removing the el in the first line.. try to move it as the last line.... also the shared function is not complete... what is paytable

myRM Over a year ago

Paytable is the id of the table. updated my post.

Arun P Johny Over a year ago

@myRM see the update... let me also ask what you are trying to do

|

Collectives™ on Stack Overflow

jQuery to Javascript conversion

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related