javascript - Getting value from a dynamically-generated DataTable input - Stack Overflow

admin管理员组

文章数量:1332361

So, I have a dataTable that gets its data from ajax. I want two of the columns to have text inputs so that the user may edit and update the information by clicking a button in the same row. This works fine like this:

{
    "render": function ( data, type, row ) {
        return '<input id="nameInput" type="text" value="' + row.name + '" />';
    },
    "targets": 0
},
{
    "render": function ( data, type, row ) {
        return '<input id="hourlyRateInput" type="text" value="' + row.hourlyRate + '" />';
    },
    "targets": 1
},

{
        "targets": 2,
        "data": null,
        "defaultContent": "<button>Update</button>"
},

The data is loaded into the editable text input. However, I can't find a way to extract the value from the input after this. The closest I've e is

var data = table.row( $(this).parents('tr') ).data();

which give successfully gives me the data from that row. However, the text input value never changes. If the user edits the text, data.name gives me the old data that was originally loaded into the table. Is there an efficient way to pull this data out of the text input?

So, I have a dataTable that gets its data from ajax. I want two of the columns to have text inputs so that the user may edit and update the information by clicking a button in the same row. This works fine like this:

{
    "render": function ( data, type, row ) {
        return '<input id="nameInput" type="text" value="' + row.name + '" />';
    },
    "targets": 0
},
{
    "render": function ( data, type, row ) {
        return '<input id="hourlyRateInput" type="text" value="' + row.hourlyRate + '" />';
    },
    "targets": 1
},

{
        "targets": 2,
        "data": null,
        "defaultContent": "<button>Update</button>"
},

The data is loaded into the editable text input. However, I can't find a way to extract the value from the input after this. The closest I've e is

var data = table.row( $(this).parents('tr') ).data();

which give successfully gives me the data from that row. However, the text input value never changes. If the user edits the text, data.name gives me the old data that was originally loaded into the table. Is there an efficient way to pull this data out of the text input?

• javascript
• jquery
• datatables

Share Improve this question Follow edited Feb 11, 2015 at 22:58 A.L 10.5k1010 gold badges7171 silver badges105105 bronze badges asked Feb 11, 2015 at 21:32 effendoeffendo 9311 silver badge88 bronze badges 1

• Use .attr('data-name') to get the updated attribute since .data() is stored locally and will retain its old value unless you set it. – Venkata Krishna Commented Feb 11, 2015 at 21:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

In the click event of the update button, you can get the values from the inputs like this:

var nameInput = $(this).closest('tr').find('#nameInput').val();
var hourlyRateInput = $(this).closest('tr').find('#hourlyRateInput').val();

This works by getting the parent of this (which is your update button) and then locating the selectors by Id.

Really, the Id's should be classes because the way you're doing it produces duplicate Id's.

'<input class="nameInput" ...

And then you would get the value like this:

var nameInput = $(this).closest('tr').find('.nameInput').val();

You should use .attr('data-name') as .data() give the initial value.

本文标签： javascriptGetting value from a dynamicallygenerated DataTable inputStack Overflow