Skip to main content
April 22, 2016
Question

Would like to build a list of rows from table, and then select one row to update

  • April 22, 2016
  • 2 replies
  • 550 views

I just started working with ColdFusion this week.

I have been experimenting with adding, changing, deleting, and viewing records in a small test database table.

I would like to be able to display a list of rows and then select one row to change.

I have been able to create a small HTML table to show the rows, but I am not sure that this is the best way to do this and I cannot figure out how to select a row from this HTML table.

Perhaps someone could share an example or point me to an example on the internet.

Thanks,

Brad

This topic has been closed for replies.

2 replies

Inspiring
May 20, 2016

As pointed out by ACP, contenteditable is very useful for editing the content of an HTML element.

It is neat to then use AJAX plus ColdFusion to delete/update records on your database.

For example, to delete a database record when you click on the corresponding row of the HTML table:

  • Have a ColdFusion template that will do the database manipulation
  • onClick() a table row, make an AJAX call (see sample below) to the ColdFusion template
  • ColdFusion will then delete or update the database record (the row id comes in handy in your WHERE clause)

<script>

    $(".yourTableClass")

    .on('click', 'tbody tr', function(){

        // Assuming your first cell holds the database table PRIMARY KEY

        // .eq(0) finds the first cell

        var id = $(this).closest('tr').children().eq(0).text();

       // Then delete that record on your database via AJAX, using the id you have picked up

        $.ajax({

            type: "...",

            url: "...",

            dataType: "...",

            data: {

                tablePrimaryKey: id,

                ... : ... ,

                ... : ...

            },

            success: function(result, textStatus, jqXHR) {

                ... ;

                ... ;

            }

        })   // End of ajax call

    })

</script>

BKBK
Community Expert
Community Expert
April 23, 2016

There is a cool new attribute in HTML 5:

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