Get clicked button row index of table

Sthokala
Sthokala used Ask the Experts™
on
Hi,
  I have a table with 4 rows and I have a button associated with each row. When I click on button, I need to get the rowindex of the row. Please let me know how can I do it.

Thank you
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jagadishwor DulalSenior Web Developer

Commented:
You can specify your each row using a unique id so that you can find why id was clicked.

Author

Commented:
can you please post some example code.

Thank you

Commented:
Are you trying to do this with javascript or php?  Where is the parameter getting passed to?  This is how you would do it in php:
<table>
<tr>
<td><a href="page.php?row=1">row1</a></td>
</tr>
<tr>
<td><a href="page.php?row=2">row2</a></td>
</tr>
<tr>
<td><a href="page.php?row=3">row3</a></td>
</tr>
<tr>
<td><a href="page.php?row=4">row4</a></td>
</tr>
</table>

Open in new window

Let me know if you need some more help.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi EMB01,
  Thank you for your help. I am creating table using javascript. Attached is my code. When I click on the button, I need the row Index of the table. Please let me know how can I do it.


Thank you
function getproceduresBySelectedCriteria()

{

var xmlhttp = getxmlHttpRequest();
var procDesc = document.getElementById("proc_desc").value;
var modalityId = checkSelectListSelected('modality_item');
var retired = document.getElementById("retiredCheck").checked?1:0;


var strURL = "getProcByDescOrModality.jsp?procDesc=" + procDesc+"&modalityId="+modalityId+"&retired="+retired;
xmlhttp.open("GET", strURL,true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
	
	var searchTable =document.getElementById("searchResultsTable");
	var lastRow = searchTable.rows.length-1,  i;
	  for (i = lastRow; i >= 1; i--) {
		  searchTable.deleteRow(i);
	}
	var responseText = xmlhttp.responseText.split("<br>");
	for(var i=0;i<responseText.length-1;i++) {
	var procValues = responseText[i].split("<td>");
	var searchResTable = document.getElementById("searchResultsTable");
	var tblBody = document.createElement("tbody");

	  var row = document.createElement("tr");
	  row.id=procValues[0];
	  
	  var cell = document.createElement("td");
	  var procDesc = document.createTextNode(procValues[1]);
	  cell.appendChild(procDesc);
	  row.appendChild(cell);
  
	  var cell1 = document.createElement("td");
	  var modalityDesc = document.createTextNode(procValues[2]);
	  cell1.appendChild(modalityDesc);
	  row.appendChild(cell1);
  
	  var cell2 = document.createElement("td");
	  var bodyPartDesc = document.createTextNode(procValues[3]);
	  cell2.appendChild(bodyPartDesc);
	  row.appendChild(cell2);
	  tblBody.appendChild(row);
	  
	  var cell3 = document.createElement("td");
	  var retired = document.createTextNode(returnRetiredValue(procValues[4]));
	  cell3.appendChild(retired);
	  row.appendChild(cell3);
	  tblBody.appendChild(row);
	  
	  var cell4 = document.createElement("td");
	  var buttonnode= document.createElement('input');
	  buttonnode.setAttribute('type','button');
	  buttonnode.setAttribute('name','Add');
	  buttonnode.setAttribute('value','Add');
	  cell4.appendChild(buttonnode);
	  row.appendChild(cell4);
		
		cell4.onclick=function(){ addACRProcedure(row.rowIndex);createAssociatedACRProcRow(row.rowIndex);searchTable.deleteRow(row.rowIndex);};
  
  	row.onclick=function(){HighLightTR(this,'#c9cc99','cc3333');getSelectedTableRow(this)};
  
 	 searchResTable.appendChild(tblBody);
	}
  }
}
xmlhttp.send();

}

Open in new window

Commented:
>>  I need the row Index of the table.

How do you need it?  Do you need it in URL form, like this http://www.mywebsite.com/mywebpage.php?this-is-my-row-id=1

Author

Commented:
Hi,
  Please find the attached image for the table data. When I click on add button on the first row..I need row index of that row..when I click on add button in the second row..I need row index of the second row.
Please let me know if this is not clear.
Thank you
clip.png

Commented:
Please show me the code on the "add" button.

Author

Commented:
var cell4 = document.createElement("td");
        var buttonnode= document.createElement('input');
        buttonnode.setAttribute('type','button');
        buttonnode.setAttribute('name','Add');
        buttonnode.setAttribute('value','Add');
        cell4.appendChild(buttonnode);
        row.appendChild(cell4);
            
            cell4.onclick=function(){ alert(row.rowIndex)};
Commented:
I would try changing to this:
var cell4 = document.createElement("td");
        var buttonnode= document.createElement('input');
        buttonnode.setAttribute('type','button');
        buttonnode.setAttribute('name','Add');
        buttonnode.setAttribute('value',row.rowIndex);
        cell4.appendChild(buttonnode);
        row.appendChild(cell4);
            
            cell4.onclick=function(){ alert(row.rowIndex)};

Open in new window

This way, the button name is 'add' and the value is the index of the item which is to be added.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial