Question

29

Make html table editable, and enable a per-row button when text changes in that row

rated 0 times [ 34] [ 5] / answers: 1 / hits: 16554 / 11 Years ago, sat, june 22, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 11 Years ago koltenb · Accepted Answer

        <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);

    });