Add new table row on action

Hi guys. Just wanted to start a new thread as I have most things working (besides one thing), but mainly I want to try and clean things up because I think I am over doing things. If you have seen my previous threads, you will know I have a table

<table class="table1">
<tr>
<td class="title">1:</td>
<td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
<td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
<td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
</tr>

<tr>
<td class="title">2:</td>
<td><input type="text" placeholder="Giving" class="selector" name="giving2" autocomplete="off"/></td>
<td><input type="text" placeholder="Getting" class="selector" name="getting2" autocomplete="off"/></td>
<td><input type="text" name="popupdate2" id="popupdate2" class="popupdate" value="When" /></td>
</tr>
</table>


I then have a couple of methods to add and remove rows to this table

var stdContent = "<td class='tabletitle'>xx:</td>\n" +
"<td><input type='text' placeholder='Giving' class='giving_selector' name='giving1[]' autocomplete='off'/></td>\n" +
"<td><input type='text' placeholder='Getting' class='giving_selector' name='getting1[]' autocomplete='off'/></td>\n" +
"<td><input type='text' name='popupdate2[]' id='popupdatexx' class='popupdatepicker' value='when' /></td>\n";
var newno = 5;

function addTableRow() {
if(newno>20){
alert("Max row limit");
return;
}
var newrow = document.createElement('tr');
var theTable = document.getElementById('table1');
var tbody = theTable.getElementsByTagName("tbody")[0];

tbody.appendChild(newrow);
var newcontent = stdContent.replace('xx', newno);
newrow.innerHTML = newcontent;
newno++;
$("input.giving_selector").autocomplete({
source: 'http://www.example.com/form_ajax.php?function=giving_selector',
minLength: 2
});
$('.popupdatepicker').datepicker({
numberOfMonths: 2,
showButtonPanel: false,
dateFormat: 'dd/mm/yy',
minDate: 0,
maxDate: '+2Y'
});
}


Now I kind of cheated and added the giving_selector and datepicker into this function, but it seems to work (although I dont think it is the best way). Now somewhere else in my code, I have another datepicker thing, which is used for the fields in the original table.

$('.popupdatepicker').datepicker({
onSelect: function() {
addTableRow();
},

numberOfMonths: 2,
showButtonPanel: false,
dateFormat: 'dd/mm/yy',
minDate: 0,
maxDate: '+2Y'
});

I added an onSelect function to this, because my aim was to get it to add a new row automatically to the table whenever the last date is selected. So, initially there are 2 rows in the table, if the date in the second row is selected, the event should fire and add a new row. If two new rows are then added, the fourth calandar will be the only one which can now fire this event. The way I have it at the moment, it adds a new row on every date, because I have no idea how to do it only to the date in the last row.

So really, I am just looking for advise on this, and generally on the code as a whole and what I can do to make it better. I come from a java background where everything is very OO, and to me, I feel my code at the moment is really messy, and I really want to tidy it up.

Cheers

Nick

Currently you are addressing all elements with the class “popupdatepicker”. One simple approach would be to assign a specific class to the newest (last) datepicker and remove that class upon selecting. And you would only address the element with the specific class to execute the addition.

So, say you have this:

<input type="text" name="popupdate2" id="popupdate2" class="popupdatepicker last" value="When" />

You would do:

$('.popupdatepicker.last').datepicker({
onSelect: function() {
addTableRow();
$(this).removeClass('last');
},

numberOfMonths: 2,
showButtonPanel: false,
dateFormat: 'dd/mm/yy',
minDate: 0,
maxDate: '+2Y'
});


I hope “this” works in this context. And of course, in the code for the to-be-added table row you need to add that class name to the input, too. So, now every new row includes the “last” class while you are removing it from the currently selected which results in the datepicker function to not apply for any row but the last one.

Kool. I can see where you are going with this, and it is definately something I can work on. I think it may help though if you could quickly advise me on something. I need all the added rows to have a unique id in order for the date to display. From the original post you can see I have
id='popupdatexx'

And then underneath
var newcontent = stdContent.replace('xx', newno);

Now if you look at the tabletitle, them values change successfully, I am know the replace works somewhat. However, the id's for the date does not change. When I check in firefox, they are all listed as popupdatexx. Is there any specific reason why it doesnt work on this?

Cheers

Nick