Hi,
I just recently did something like this creating a little grid
control. The idea was that I had a table with data filled in and a row
at the bottom that was where the user could insert new information.
Then when the user tabbed away from the last row a new row would be
inserted (if that makes any sense).
Anyway, what I did was always ensure that my last row had a specific
class name (NewRow, or NextRow... something like that).
Here's my AddNewRow function. This shows me removing the "New" class
from the previous new row and adding the class that all the other rows
already had. Then inserting a new row which already has the "New"
classes assigned to it... (man, I don't feel like I'm making sense...
let me know if you don't understand)
function AddNewRow(){
<CFIf IsSuperUser>
var $FieldName = $(".NextFieldName");
var $ColumnName = $(".NextColumnDisplay");
var FieldNameValue = $FieldName.val();
var ColumnNameValue = $ColumnName.val();
if(FieldNameValue.length && ColumnNameValue.length){
// create a structure from the values and push it onto
the
ColumnDetail array
var ColumnDetailStruct = {};
ColumnDetailStruct.fieldname = FieldNameValue;
ColumnDetailStruct.columnname = ColumnNameValue;
ColumnDetailStruct.deleteme = "No";
ColumnDetailStruct.columnheaderid = 0;
if($.IsDefined(ColumnDetail[ColumnDetail.length - 1]) &&
$.StructKeyExists(ColumnDetail[ColumnDetail.length - 1],
"columnnamesort")){
ColumnDetailStruct.columnnamesort =
(ColumnDetail[ColumnDetail.length - 1].columnnamesort) + 10;
}
else{
ColumnDetailStruct.columnnamesort = 10;
}
if($.IsDefined(ColumnDetail[ColumnDetail.length - 1]) &&
$.StructKeyExists(ColumnDetail[ColumnDetail.length - 1],
"ordertypesort")){
ColumnDetailStruct.ordertypesort =
ColumnDetail[ColumnDetail.length - 1].ordertypesort;
}
else{
ColumnDetailStruct.ordertypesort = 10; // this
isn't right... fix
it tomorrow.
}
ColumnDetail.push(ColumnDetailStruct);
// remove any classes that identify this as the "Next"
row
$(".NextRowIdentifier").empty().removeClass("NextRowIdentifier");
$FieldName.removeClass("NextFieldName").addClass("NewRecord");
$ColumnName.removeClass("NextColumnDisplay").addClass("NewRecord");
// append a new row so the user can continue entering
information.
$("##myTbodyID").append(newRow);
$(".NextFieldName").focus(); //... then set the focus
to the first
field of that new row.
}
</CFIf>
}
</CFOutput>
If you're not familiar with the little bit of ColdFusion that's
intermixed in here don't worry, it shouldn't be important. Just know
that ## is the way to escape the # in CF and that it's necessary for
the final code to end up with just a single #.
the "newRow" variable is a javaScript variable that I defined globally
up at the top of my code. It looks like this:
<CFOutput>
var newRow = "";
newRow += "<tr>";
newRow += "<td style='cursor: default; padding:3px; border:1px solid
black;' class='NextRowIdentifier
NormalBackgroundColor'>#ThisRightArrowSymbol#</td>";
newRow += "<td style='padding:3px; border:1px solid black;'><input
type='text' class='InvisoTextBox NextFieldName NormalBackgroundColor'
size='22' value=''></td>";
//newRow += "<td style='padding:3px; border:1px solid black;'><input
type='text' class='InvisoTextBox NextDefaultColumnDisplay
NormalBackgroundColor' size='25' value=''></td>";
newRow += "<td style='padding:3px; border:1px solid black;'><input
type='text' class='InvisoTextBox NextColumnDisplay
NormalBackgroundColor' size='25' value='' onblur='AddNewRow();'></
td>";
newRow += "</tr>";
</CFOutput>
(I hope this wraps okay... it looks like rubbish on my screen now)...
again with the little bit of CF code, it shouldn't matter if you don't
understand it.
You'll notice that on my new row I've got an onblur on the last cell
of the row which just calls the AddNewRow() function.
I hope that some of this is helpful. Give a shout if it doesn't make
sense.
Cheers,
Chris
On Apr 18, 4:02 pm, "[EMAIL PROTECTED]"
<[EMAIL PROTECTED]> wrote:
> Hi, I have this HTML code
>
> <table>
> <tr><td id="1" class="tab">...</td></tr>
> <tr><td id="2" class="tab">...</td></tr>
> <tr><td id="3" class="tab">...</td></tr>
> <tr><td id="4" class="tab">...</td></tr>
> </table>
>
> and have defined this function
>
> $('td.tab').click( function() {
> ...
> });
>
> What I want to do is determine within the function if the user clicked
> on the last table row (in the above example, the table row with
> id="4"). The ids are not fixed, I just included them to illustrate
> what I want to do.
>
> Thanks, - Dave
