Better paradigms for posting JSON from a table?

With a table based interface where users can update the rows by pressing a button. Perhaps there is a better way of doing this, without pressing a button, i.e. post on textarea/row change (could be a selectbox column). My requirement is that it's the LEAST amount of JavaScript possible, without being cryptic.

For example, could the code here be improved (assume an uptodate Firefox/Chrome browser), ideally without changing the HTML?

$(document).ready(function () {
$('button').click(function () {
    var row = $(this).parent().parent();
    row.css("background-color", "red");
    var id = row.children(':nth-child(1)').text();
    var note = row.find('textarea').val();
    var data = {
        json: JSON.stringify({
            id: id,
            note: note
        })
    };

    $.ajax({
        url: "/echo/json/",
        type: "POST",
        data: data,
        contentType: "application/json"
    }).done(function (d) {
        console.log(d);
        row.css("background-color", "green");
    });
});
});

I want less code for the JavaScript and I was thinking how much effort if would be to remove the jQuery dependency entirely. Ashamedly it took me a long time to write that jQuery!

$('button').click(function () {
    var row = $(this).parent().parent();

The button selector is not specific enough. To make sure that .parent().parent() will be what you think it is, and to clarify it in the code, I would recommend this way instead:

$('tr > td > button').click(function () {

Having the id value as the text of a td field is not great. Judging by the name "id", it sounds like technical information that shouldn't really be visible. In HTML5 you can use attributes prefixed with data- for embedding technical details invisibly inside your HTML. So I would write your rows this way:

    Goonies
    
        
    
    
        Save
    

And then you could get id like this:

var id = row.attr('data-id');

Perhaps there is a better way of doing this, without pressing a button, i.e. post on textarea/row change (could be a selectbox column).

You could trigger your function on a change to the textarea, in addition to the button, for example:

function onRowChanged() {
    var row = $(this).parent().parent();
    row.css("background-color", "red");
    var id = row.attr('data-id');
    var note = row.find('textarea').val();
    var data = {
        json: JSON.stringify({
            id: id,
            note: note
        })
    };

    // ...
}
$('tr > td > button').click(onRowChanged);
$('tr > td > textarea').change(onRowChanged);

I want less code for the JavaScript and I was thinking how much effort if would be to remove the jQuery dependency entirely.

For the record, I don't think there's anything wrong with having some JavaScript code. On the other hand, getting rid of jQuery can be a good thing, if you only need a tiny subset of its power. It's certainly possible to rewrite this small piece of code without jQuery, but I'm not very good at that myself. Instead, I can recommend zepto.js as an ultra-light jQuery replacement. You can try it in your fiddle, just change the Framework to Zepto, and make a small modification to your AJAX call:

$.ajax({
    url: "/echo/json/",
    type: "POST",
    data: data,
    contentType: "application/json",
    complete: function (d) {
        console.log(d);
        row.css("background-color", "green");
    }
});

I hope this helps, but you might want to wait for some real JavaScript experts to respond!

StackExchange Code Review Q#61284, answer score: 2