Question

I want to be able to print out a table with x rows and about 10 columns. However, I want to be able to select rows in the table as if it was a multiple select box. Selecting the row of the table will cause an additional text area to display additional information about that row of data.

What’s the best way of doing this in AJAX?

Answer 1

There are a bunch of things you need to go, but I’ll give you an idea of what you need. For each row, you’ll want to attach a click listener to it or you allow the click event to bubble up to the table and catch it there and then inspect which row it was in (here’s how the YUI folks do this). On each HTML element, you’ll want to have some way of identifying which row was clicked. It can be part of the HTML id or you can use a different attribute altogether that you retrieve with trElement.getAttribute('yourAttribute').

Once you have the id, then you can show a textarea or make an AJAX call that grabs additional data and then displays a textarea. You’ll want to define some webservice that takes an id and returns either the HTML to display or JSON data that you can parse and then build the display yourself. Depends on how much data you’re sending whether it’s better to return JSON or HTML, though I tend to prefer JSON. If you can select more than one row, you’ll want to store which rows have been clicked somewhere in JavaScript. This is as simple as having a variable which is the set of clicked ids and everytime you click on that row you add it or remove it based on whether it was already there. You can also add a class to each selected row so the background color changes or something when it’s selected.

At a high level, that’s all there is to it, but I can elaborate on a specific part if you’ve got more specific questions.