Anyone willing to see my hacketi hack code. Wanted to maintain row template in html page. Table rows 0...n are rendered at request time, this example has one hardcoded row and simplified template row. Template table is hidden, row tag must be within a valid table or browsers may drop it from DOM tree. Adding a row uses counter+1 identifier, current value is maintained in data attribute. It guarantees each row gets an unique url parameters.

Run test on IE8, IE9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (Symbian^3), Android stock and FirefoxBeta browsers.

ps: Give all credits to jQuery team, they deserve everything. Javascript programming without jQuery /me want no even think about that nightmare.

Here is some hacketi hack code. I wanted to maintain a row template in an HTML page. Table rows 0...n are rendered at request time, and this example has one hardcoded row and a simplified template row. The template table is hidden, and the row tag must be within a valid table or browsers may drop it from the DOM tree. Adding a row uses counter+1 identifier, and the current value is maintained in the data attribute. It guarantees each row gets unique URL parameters.

I have run tests on Internet Explorer 8, Internet Explorer 9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (with Symbian 3), Android stock and Firefox beta browsers.

PS: I give all credits to the jQuery team; they deserve everything. JavaScript programming without jQuery - I don't even want think about that nightmare.

Anyone willing to see my hacketi hack code. Wanted to maintain row template in html page. Table rows 0...n are rendered at request time, this example has one hardcoded row. Template table is hidden, row tag must be within a valid table or browsers may drop it from DOM tree. Adding a row uses counter+1 identifier, current value is maintained in data attribute. It guarantees each row gets an unique url parameters.

Run test on IE8, IE9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (Symbian^3), Android stock and FirefoxBeta browsers.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

ps: Give all credits to jQuery team, they deserve everything. Javascript programming without jQuery /me want no even think about that nightmare.

Anyone willing to see my hacketi hack code. Wanted to maintain row template in html page. Table rows 0...n are rendered at request time, this example has one hardcoded row and simplified template row. Template table is hidden, row tag must be within a valid table or browsers may drop it from DOM tree. Adding a row uses counter+1 identifier, current value is maintained in data attribute. It guarantees each row gets an unique url parameters.

Run test on IE8, IE9, Firefox, Chrome, Opera, Nokia Lumia 800, Nokia C7 (Symbian^3), Android stock and FirefoxBeta browsers.

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

ps: Give all credits to jQuery team, they deserve everything. Javascript programming without jQuery /me want no even think about that nightmare.