How to get data from a table row with a link in each row?

Question

How to retrieve data from a table row after clicking on the "Edit" link?

This is the table code in javascript

var str = "<table style=width:100%; border-spacing:0; id='homeworkTable' class='smallTableVH'>";
            str+= "<form action='javascript:editHomeworkInterface()' name='viewHomeworkF'>";
            str+="<tr>";
            for (var i=0;i<output.ID.length;i++)
            {
                if(output.ID[i]=="Staff_ID")
                {
                }
                else
                str+="<th>"+output.UI_label[i]+"</th>"; //list the column name
            }

            var homeworkInterfaceToBeCreate = 
                { 
                    'output': result
                };




                localStorage.setItem('homeworkInterfaceToBeCreate',JSON.stringify(homeworkInterfaceToBeCreate));//stringify is to change the value to json

            //get data from database 
            for(var i=0;i<output.Data.length;i++)
            {
                str+="<tr>";
                str+="<td>"+output.Data[i][0]+"</td>";
                str+="<td>"+output.Data[i][1]+"</td>";
                str+="<td>"+output.Data[i][2]+"</td>";
                str+="<td>"+output.Data[i][3]+"</td>";
                str+="<td>"+output.Data[i][5]+"</td>";
                str+="<td>";
                str+="<form id='selectedRow'><div class='link'>";
                str+="<a href='javascript:editHomeworkInterface()' id='checkbox_"+i+"'                   class='checkbox' type='button' name='name' value=''>Edit</a>";
                str+="</div></form>";
                str+="</td>";
                str+="</tr>";
            }
            str+= "<input type='hidden' name='totalHomework' id='totalHomework' value='"+output.Data.length+"'>";//hidden field
            str+="</tr>";
            str+="</table>";

How can i retrieve the data from the table after clicking on the "Edit" link?

Answer 1

Do you want something link this:

Change this

str+="<a href='javascript:editHomeworkInterface()' id='checkbox_"+i+"'                   class='checkbox' type='button' name='name' value=''>Edit</a>"

to

str+="<a class='alink' href='javascript:void(0)'>Edit</a>"

Javascript :

$('.alink').click(function() {
   var row = $(this).closest('tr')[0];
  str += "Homework ID : <input type='text' class='textbox' id='id_" + count + "' readonly='readonly' value='" + row.cells[0].innerHTML + "'/>";
  str += "Homework Description : <textarea rows='8' cols='50' name='name' class='textarea' id='description_" + count + "'>" + row.cells[1].innerHTML + "</textarea>";
});