table row click
table row click
Please could anyone help me urgently.
I am having a bit of a hassle.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
//My page only works when clicking on the physical row of the table.
// I want it do the same #N(button) is clicked as well to simulate
//the same behaviour as the manual click process.
<script type="text/javascript">
//These 2 variables will only be set at the bottom of the page
var xFactor;
var DeleteRow;
$(document).ready(function(){
$('#N').click(function(){
//Here I set the doc number typed in
var Doc = $('#ab').val();
//Check that this is correct which is
alert('New Index ' + Doc);
//Want to load the next tr id into the iframe, but is not working
$('#Fr').attr('src', xFactor)
//Tried to set a trigger which I would actually like to auto click the next (3rd) tr
//Not working. the below trigger clicks all the selected rows at once and removes them all.
$(".waybilllink").trigger('click');
});
});
</script>
<div style="position: absolute; width: 323px; height: 450px; z-index: 1; left: 2px; top: 1px" id="layer1">
<div style="position: absolute; width: 692px; height: 450px; z-index: 1; left: 323px; top: 0px" id="layer2">
<table id="ShowDocument" width="690" cellspacing="0" cellpadding="0">
<tr>
<td colspan='8' bgcolor="#000000">
<p align="center"><b><font face="Tahoma" size="2" color="#808080">Please ensure your document number is inserted correctly.</font></b></td>
</tr>
<tr>
<td width="114" bgcolor="#C0C0C0">
<p align="center"><font face="Tahoma" size="2">Doc No :</font></td>
<td width="118" bgcolor="#C0C0C0"><font face="Tahoma">
<input type='text' name='a' id='ab' size="15" style="border-style:inset; border-width:1px; font-family: Tahoma; font-size: 8pt; font-weight: bold"></font></td>
<td width="81" bgcolor="#C0C0C0">
<p align="center"><font face="Tahoma" size="2">Acc No :</font></td>
<td width="117" bgcolor="#C0C0C0"><font face="Tahoma">
<input type='text' name='a0' size="17" style="border-style:inset; border-width:1px; font-family: Tahoma; font-size: 8pt; font-weight: bold"></font></td>
<td width="77" bgcolor="#C0C0C0">
<p align="center"><font face="Tahoma" size="2">Action :</font></td>
<td width="58" bgcolor="#C0C0C0">
<p align="center"><b><font face="Tahoma" size="2"><a id='N' href="#">
<font color="#008000">New</font></a></font></b></td>
<td width="58" bgcolor="#C0C0C0">
<p align="center"><b><font face="Tahoma" size="2" color="#FF9900">
<a id='A' href="#"><font color="#FF9900">Assign</font></a></font></b></td>
<td width="57" bgcolor="#C0C0C0">
<p align="center"><b><a id='D' href="#">
<font face="Tahoma" size="2" color="#FF0000">Delete</font></a></b></td>
</tr>
<tr>
<td width="663" colspan="8">
<iframe id='Fr' width="100%" height="403" name="IndexWaybill" border="0" frameborder="0" src="../../../PATH_TO_FILE_NAME/FILENAME-679359099.pdf"></iframe></td>
</tr>
</table></div>
<table id='IndexQueue' width="323" cellspacing="0" cellpadding="0">
<thead>
<tr><td colspan="3" bgcolor="#000000" align='center'>
<b><font face="Tahoma" size="2" color="#808080">Click on item below to index</font></b></td>
</tr>
<tr><td bgcolor="#C0C0C0" height="21">
<p align="center"><b><font face="Tahoma" size="2">Branch</font></b></td>
<td bgcolor="#C0C0C0" height="21">
<p align="center"><b><font face="Tahoma" size="2">Instance No</font></b></td>
<td align="center" bgcolor="#C0C0C0" height="21"><b><font face="Tahoma" size="2">Operator</font></b></td>
</tr>
</thead>
<tbody>
///ALL TABLE ROWS ARE POPULATED HERE AUTOMATICALLY FROM include('Populate.php'); which works 100%
<tr class='waybilllink' id='linktofilename-numeric.pdf'>
<td align='center'>
<font face='Tahoma' size='2'>DUR</font>
</td>
<td align='center'>
<font face='Tahoma' size='2'>24531039</font>
</td>
<td align='center'><font face='Tahoma' size='2'>ronesh</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//Since my page does not know of the data until the include ('populate.php')
//has filled the table
//1. I declare my table
var $table = $("#IndexQueue");
//2. Declare var to be used for current table row not assigned yet
var valueLink;
//3. All table rows have waybilllink class, so I call the class per click
$table.delegate("tr.waybilllink", "click", function()
{
//Get the id of the current clicked table row
valueLink = $(this).attr('id');
// set var to remove the table row element once clicked on
var DeleteRow=valueLink;
// #Fr is an iframe which I load the unique filenames into
$('#Fr').attr('src', valueLink) //Works 100%
//Now I set a value of the next ID that I want to be fired automatically
var NextId = $(this).closest("tr").attr('id')
// xFactor is declared at the top of the page, here I set the top var
xFactor = NextId;
// Seeing that the iframe is successfully loaded the file
// I remove the table row.
$(this).remove();
});
</script>
</div>
</body>
</html>