Inserting new <TD> elements into a table row.

Question

I have created a small application written in XHTML, JavaScript/JQuery and PHP.

The PHP reads and writes to a small SQLite database.

How would i go about inserting cells into a pre-scripted table. The cells would need to be configured using some information from my database. For example, below are two cells with their data retrieved from my database:

Cell One
Starts: 120px;
Finishes: 180px;
Background: Blue;

Cell Two
Starts: 240px;
Finishes: 300px;
Background: Green;

On my table row, it is 500px in width. How would I insert the cells above into the row. In this example, the first cell would start 120px into the row and have a width of 180px. The second cell would start 240px into the row and have a width of 300px.

I just cant seem to work out a way of doing this, any ideas would be very helpful.

Thank you for any input, all is appreciated. Hunter.

Answer 1

forgive me if this answer is too simplistic but it sounds like you just need to loop through a variable that stores the cells that need to be inserted into a table that already exists. Then you can dynamically generate the styles of whatever tag you need to edit such as style="<?= background-color:green; ?>"

I'm not exactly sure what you mean by starts and finishes. If your trying do placements then it will be a lot more complicated and you need some sort of position element in your db that can be referenced. But if you just mean height and width then you can also add these elements to the dynamically generate style

Answer 2

Not entirely sure what you're asking, but I'll give it a shot.

var c1 = 'stuff, stuff stuff.' // Your data for cell1
  , c2 = 'more stuff.' // Data for cell2

$('table tr:first').append(
    // Ugly multiline string
    '<td width=120></td>
     <td width=60 style="background-color: blue">' + c + '</td>
     <td width=60></td>
     <td width=60 style="background-color: green">' + c2 + '</td>
     <td width=200></td>' // Filler
);

Answer 3

When building the tables, Put html comment tags with parameters so you can scan pre created output and insert where and how you like.

<table>
<!--|str1|2|60|100|--><tr>
<!--|str1td1|--><td width='60'>content row 1</td><!--|etr1td1|-->
<!--|str1td2|--><td width='100'>content row 2</td><!--|etr1td2|-->
</tr><!--|etr1|-->

<!--|str2|2|60|100|--><tr>
<!--|str2td1|--><td width='60'>content row 1</td><!--|etr2td1|-->
<!--|str2td2|--><td width='100'>content row 2</td><!--|etr2td2|-->
</tr><!--|etr2|-->
</table>

Then if you want to go back into your output and insert stuff, just strrpos (php) to the tr you want to edit and gather between comment tags, pharse the pipe seperated fields, you know the first is the id tag, the second is how many td's and the next two can be added to figure the width so far. Then find the tag for the end of the td you want to insert into after. Do your insert (include new tags!). Then go back and re comment the tr info you just read and include new row and information.

After all done and ready to output, go back and remove and the comment tag stuff from output. Or leave it in if you are lazy, it is just html comment stuff that will not be seen but kinda heavy on the text size side.

Sounds more complicated than it is, kind hard to explain but you should know exactly what i mean and the process can be more elaborate or simple to meet your needs.

If this is close to what you need, then hope this helps or ask me more, if not then i am sleepy so please excuse me.