3

I have an html table that looks like the following:

    <table id="tree">
        <tr id="foo-1">
            <td>fooId1</td>
            <td>fooName1</td>
            <td>fooCsv1</td>
            <td><button id="button-1" type="button" disabled>Save</button></td>
        </tr>
        <tr id="foo-2">
            <td>fooId2</td>
            <td>fooName2</td>
            <td>fooCsv2</td>
            <td><button id="button-2" type="button" disabled>Save</button></td>
        </tr>
    </table>

There are two modifications I want to do to this table:

-First, I want to make the fooName and fooCsv td elements editable (there are actually a couple more editable columns, but I'm just using two to make this example simpler). I know that I can simply put an input inside the td element and set the value, but was wondering if there's a simpler way.

-Second, I want the Save button in each row to become enabled when a user changes the text in that row via typing/copy-paste/etc. I've googled and found that I might be able to do this by adding a handler for an input event, but I'm not sure of the simplest way to incorporate this, and I'm not sure if it has ramifications for the first task I have.

I think this should be easy if I knew much about html and javascript, but I don't, so does anyone know a simple way to achieve what I'm trying to do?

jonderry
  • 23,013
  • 32
  • 104
  • 171

1 Answers1

7
        <td contenteditable="true">fooName1</td>

And use what ever you want to post the table HTML

edit:

http://jsfiddle.net/9yyKN/11/

//Listen to blur event in contenteditable td elements 
    $('td[contenteditable=true]').blur(function () {
      $(this).parent('tr').find('button').removeAttr('disabled');

    });
//When a button is clicked find the nearest contenteditable td //element(s) and push their 
text content to an array, this array is later being posted.
    $('button').click(function () {
        var contents = $(this).parents().find('td[contenteditable=true]');
        var contentArray = [];
        for (i = 0; i < contents.length; i++) {
            contentArray[i] = contents[i].innerHTML;
        }
        $.post("test.php", contentArray);
    });
raam86
  • 6,785
  • 2
  • 31
  • 46
  • cool, and how do I attach a listener for the text change to enable the button? – jonderry Jun 22 '13 at 02:20
  • Thanks! Where do I put the jquery code? is there another event besides blur that refers to the text changing? – jonderry Jun 22 '13 at 03:26
  • You can wrap the whole thing in a ready. In this code only blur changes the button attribute – raam86 Jun 22 '13 at 03:28
  • Do I have to include jQuery to use it? – jonderry Jun 22 '13 at 03:31
  • Yes. The library hugely simplifies ajax requests – raam86 Jun 22 '13 at 03:32
  • can you please suggest how can i get these values in javascript?when the client edits and press save m getting its values like `$('#addForm td').each( function(index){ var input = $(this); alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.text()); ` but in this case i m unable to get as they are just placed in a td – Divya Oct 11 '14 at 19:56
  • Use innerHtml just like in the example – raam86 Oct 12 '14 at 07:59