Contenteditable in a table: select cells

Question

I generate a table in php. Each cell has a separate identifier made from the column name and row number.

<tr>
    <td contenteditable="true" id="i-date-1">26/03/2014</td><td id="i-amount-1">200</td>
    <td contenteditable="true" id="i-date-2">26/04/2014</td><td id="i-amount-2">300</td>
</tr>

I want to write changes to sql database through jQuery. To do this, I need to add an eventListener to each cell, and then call a function that will send data to the php script server, but I'm confused about how to do this, here is my attempt, which does not work:

$(['id*="i-"']).each(function() {
            $(this).addEventListener("blur", updateFunction, false);
            $(this).spellcheck = 'true';
});

And then my update function:

function updateFunction()
{
    var lineID = $(this).attr(id);
    var needle = lineID.indexOf("-");
    needle = lineID.indexOf("-", needle);
    needle = needle + 1 ;
    lineID = lineID.substr(needle);
    $.ajax({
        type: "get",
        url: "queries.php?q=update&iID="+lineID,
    });
}

1) Am I doing the right thing to add eventListener to all cells or is it easier there? 2) my updateFunction is crappy, I know :), but I'm not experienced enough to figure out how to fix it ... if anyone can help?

Thank you in advance for your time.

Answer 1

, .

$("[id*='i-']").on("blur", updateFunction).prop('spellcheck', true);
function updateFunction()
{
  var lineID = $(this).attr('id');
  var needle = lineID.indexOf("-");
  needle = lineID.indexOf("-", needle);
  needle = needle + 1 ;
  lineID = lineID.substr(needle);
  $.ajax({
    type: "get",
    url: "queries.php?q=update&iID="+lineID,
  });
}

http://jsbin.com/nitewe/edit?js,output

data-* , data-1 date-2

<td contenteditable="true" class="i-date" data-date="date-1">26/03/2014</td><td class="i-amount">200</td>
<td contenteditable="true" class="i-date" data-date="date-2">26/04/2014</td><td class="i-amount">300</td>

script -

$(".i-date").on("blur", updateFunction).prop('spellcheck', true);
function updateFunction()
{
  var lineID = $(this).data('date');
  var amt = $(this).next('.i-amount');
  $.ajax({
    type: "get",
    url: "queries.php?q=update&iID="+lineID,
  });
}

.next([selector]) .i-amount.

http://jsbin.com/sucozu/edit?html,js,output

Answer 2

id

<td contenteditable="true"  dateId="date-1">26/03/2014</td><td id="i-amount-1">200</td>
<td contenteditable="true"  dateId="date-2">26/04/2014</td><td id="i-amount-2">300</td>

function updateFunction()
{
    lineID = $(this).attr('dateId');
    $.ajax({
        type: "get",
        url: "queries.php?q=update&iID="+lineID,
    });
}