Making a table row editable?

Discussion in 'Javascript' started by planetthoughtful, Nov 10, 2006.

  1. Hi All,

    I have a web page that presents records in a table, with one row per
    record.

    I'd like to put an edit button next to each record, such that if a user
    clicks on the edit button next to a particular record, that record
    becomes an editable form.

    I'm assuming this can be achieved via JavaScript, and I'm wondering if
    anyone can point me at any online resources that might step me through
    achieving this, as my Google-Fu is turning very high noise-to-signal.

    Many thanks in advance,

    pt
    planetthoughtful, Nov 10, 2006
    #1
    1. Advertising

  2. planetthoughtful

    Fred Guest

    planetthoughtful wrote:
    > Hi All,
    >
    > I have a web page that presents records in a table, with one row per
    > record.
    >
    > I'd like to put an edit button next to each record, such that if a user
    > clicks on the edit button next to a particular record, that record
    > becomes an editable form.


    Is your "record" the contents of a cell, or the entire row?


    > I'm assuming this can be achieved via JavaScript, and I'm wondering if
    > anyone can point me at any online resources that might step me through
    > achieving this, as my Google-Fu is turning very high noise-to-signal.


    The simplest implementation would be for a click on a cell to pop-up a
    prompt with the content of the cell as its value. The user modifies
    the value and the result is put back into the cell.

    You could extend that significantly to putting the content of the row
    into a pop-up table, use the table header to label fields, fill field
    content from the row, make them editable based on a class attribute in
    the original table, then drop the new values back into the form when
    the user is finished (and allow a cancel too of course).

    You want to investigate:

    - the onclick event to make things happen
    - creating elements so you can do the pop-up thing
    - referencing elements so you can get the content from the table and
    write it back when you're finished
    - deleting elements so you can destroy the pop-up when you're
    finished.

    You will also want to checkout methods for sending the data back to the
    sever. You might have a hidden form that you submit with changes, or
    the entire table could be a form and you send back the whole lot.

    This really is a bit of "how long is a piece of string" question.

    Here's something really basic to start you off, the text inputs should
    be type="hidden", I've left them as text so you can see what's
    happening.

    <script type="text/javascript">
    function editEl(el){
    var elText = el.innerHTML;
    var dbField = el.className;
    elText = prompt('Please enter a new value:', elText);
    el.innerHTML = elText;
    document.forms['personDetails'].elements[dbField].value = elText;
    }

    </script>

    <table>
    <tr><th>name</th><th>Age</th>
    <tr>
    <td class="personName" onclick="editEl(this);">Fred
    <td class="personAge" onclick="editEl(this);">47
    </table>
    <form action="" name="personDetails" id="personDetails"><div>
    <input type="text" name="personName"><br>
    <input type="text" name="personAge"><br>
    <input type="submit" value="Transmit changes..."></div>
    </form>


    HTH :)


    --
    Fred
    Fred, Nov 10, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Stephan Bour

    Making datagrid partially editable

    Stephan Bour, Jan 29, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    1,010
    Stephan Bour
    Jan 30, 2004
  2. =?Utf-8?B?cG11ZA==?=

    Making ONLY 2 columns editable in a datagrid

    =?Utf-8?B?cG11ZA==?=, Jan 10, 2005, in forum: ASP .Net
    Replies:
    8
    Views:
    3,342
    =?Utf-8?B?Q2hpbm1heQ==?=
    Jan 26, 2005
  3. Luis Esteban Valencia

    Make a DataGrid row editable after user selects the row

    Luis Esteban Valencia, Jan 12, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    351
    Luis Esteban Valencia
    Jan 12, 2005
  4. phl
    Replies:
    1
    Views:
    4,330
    Martin Jay
    Jun 8, 2006
  5. D
    Replies:
    0
    Views:
    197
Loading...

Share This Page