JQuery datatable link onclick event

Question

I have a jquery datatable that contains multiple columns and rows as below.

<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Class</td>
            <td>Action</td>
            <td>Score</td>
            <td>Corrected Score</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Student1</td>
            <td>Math</td>
            <td><a href="#">Add 5</a>
            </td>
            <td>73</td>
            <td>
                <input type="text" id="1_final_score" />
            </td>
        </tr>
        <tr>
            <td>Student2</td>
            <td>Biology</td>
            <td><a href="#">Add 5</a>
            </td>
            <td>84</td>
            <td>
                <input type="text" id="2_final_score" />
            </td>
        </tr>
        <tr>
            <td>Student3</td>
            <td>History</td>
            <td><a href="#">Add 5</a>
            </td>
            <td>50</td>
            <td>
                <input type="text" id="3_final_score" />
            </td>
        </tr>
    </tbody>

When i click on the "Add 5" link, I want to add 5 to the score in the corresponding row and insert the result in the final score input field. I have tried using the jquery row-select feature, but am unable to figure out how to accomplish the above.

check this @Dan you can use this jsfiddle.net/yecmqf5z

Junaid Ahmed
– Junaid Ahmed

2015-05-18 06:26:08 +00:00
Commented May 18, 2015 at 6:26 — Junaid Ahmed
– Junaid Ahmed, Commented May 18, 2015 at 6:26

Amar Kamthe · Accepted Answer · 2015-05-18 06:28:17Z

4

$(document).ready(function () {
$('table').find('a').click(function () {
    var original = parseInt($(this).parents('tr').find('td:nth-child(4)').text()) + 5;

    $(this).parents('tr').find('input[type=text]').val(original);

   });

});

edited May 18, 2015 at 6:28

answered May 18, 2015 at 6:18

Amar Kamthe

2,5822 gold badges17 silver badges25 bronze badges

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

2 Comments

Asad Naeem Over a year ago

$('table') should be $('#table')

Amar Kamthe Over a year ago

It is html tag not id so $('table')

Brijesh Bhatt · Accepted Answer · 2015-05-18 06:14:29Z

1

You can try this:

$(document).ready(function(){
    $("a").on("click", function(){
        var num=parseInt($(this).closest("td").next("td").text());
        num=num+5;
        $(this).closest("td").next("td").text(num);
        $(this).closest("tr").find("input").val(num);

    });
});

FIDDLE

answered May 18, 2015 at 6:14

Brijesh Bhatt

3,8303 gold badges20 silver badges34 bronze badges

Comments

Sridhar R · Accepted Answer · 2015-05-18 06:14:54Z

0

Try with this

$('a:contains("Add 5")').click(function(){
    $(this).parents('tr').find('td input:text').val(+$(this).parent().next('td').text() + 5 )
 });

FIddle : http://jsfiddle.net/2n0bevxo/172/

answered May 18, 2015 at 6:14

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Collectives™ on Stack Overflow

JQuery datatable link onclick event

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related