I am currently building a very dynamic table for a list application, which will basically perform basic CRUD functions via AJAX.
What I would like
to do is separate the visual design and javascript
to the point where I can change the design side without touching the JS side. This would only work where the design stays roughly the same(i would like
to use it for rapid protyping)
Here is an example.
<table>
<tr><td>record-123</td><td>I am line 123</td><td>delete row</td></tr>
<tr><td>record-124</td><td>I am line 124</td><td>delete row</td></tr>
<tr><td>record-125</td><td>I am line 125</td><td>delete row</td></tr>
<tr><td>add new record</td></tr>
</table>
Now, when I add a new record, I would like
to insert a new row of html, but I would rather not put this html into the javascript file.
What I am considering is creating a row like this on the page, near the table.
<tr style='visble:none;' id='template-row'><td>record-id</td><td>content-area</td><td>delete row</td></tr>
And when I come
to add the new row, I search the page for the tags with the id=template-row , and then grab it, do a string replace on it, and then put it in the right place in the page.
As long as the design doesn't shift radically, and I keep the placeholder strings the same, it means designs can be quickly modified without touching the js.
Can any give any advice on a methodology like this?
