Get clicked button row index of table

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
SthokalaAsked:
Who is Participating?
 
EMB01Connect With a Mentor 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.
0
 
Jagadishwor DulalBraces MediaCommented:
You can specify your each row using a unique id so that you can find why id was clicked.
0
 
SthokalaAuthor Commented:
can you please post some example code.

Thank you
1
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
EMB01Commented:
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.
0
 
SthokalaAuthor 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

0
 
EMB01Commented:
>>  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
0
 
SthokalaAuthor 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
0
 
EMB01Commented:
Please show me the code on the "add" button.
0
 
SthokalaAuthor 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)};
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.