Test no.3,4: Extending String and jQuery based techniques for creating DOM elements for adding more functionality

Please read
Part no.1 and

Part no.2 and

Part no.3 before reading this Part no.4

I will try to add a function in both techniques. This function will be called whenever a row will be bounded to an instance of array object. This will be helpfull in doing many operations but i will try to change the boolean value into a check box. Then i will call a function onclick event of checkbox for simulation.

Test no.3: Extendibility on data bounded with tr in test no.1

view plainprint?

1. function Row(rowData)   
2. {  
3.   var tr = "<tr>";  
4.   for (var i in rowData)   
5.   {  
6.     tr += "<td>" + rowData[i] + "</td>";  
7.   }  
8.   tr += "</tr>";  
9.   if (typeof OnRow_Bounded == 'function')   
10.   {  
11.     tr=OnRow_Bounded(rowData, tr);  
12.   }  
13.   return tr;  
14. }  
15.   
16. function OnRow_Bounded(rowData,row)   
17. {  
18.   if (rowData["isActive"] == true)   
19.   {  
20.     row = row.replace("true", "<input type='checkbox' checked='checked' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");  
21.   }  
22.   else   
23.   {  
24.     row = row.replace("false", "<input type='checkbox' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");  
25.   }  
26.   return row;  
27. }  
28.   
29. function EmployeeStatus_Change(sr,firstName)   
30. {  
31.   confirm('Do you want to change the ' + firstName + ' status?');  
32. }  

function Row(rowData) 
{
  var tr = "<tr>";
  for (var i in rowData) 
  {
    tr += "<td>" + rowData[i] + "</td>";
  }
  tr += "</tr>";
  if (typeof OnRow_Bounded == 'function') 
  {
    tr=OnRow_Bounded(rowData, tr);
  }
  return tr;
}

function OnRow_Bounded(rowData,row) 
{
  if (rowData["isActive"] == true) 
  {
    row = row.replace("true", "<input type='checkbox' checked='checked' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");
  }
  else 
  {
    row = row.replace("false", "<input type='checkbox' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");
  }
  return row;
}

function EmployeeStatus_Change(sr,firstName) 
{
  confirm('Do you want to change the ' + firstName + ' status?');
}

Following picture shows the addition of checkbox

Test no.4: Extendibility on data bounded with tr in test no.2

view plainprint?

1. function Row(rowData)   
2. {  
3.   var tr = $("<tr></tr>");  
4.   for (var i in rowData)   
5.   {  
6.     tr.append($("<td></td>").text(rowData[i]));  
7.   }  
8.   if (typeof OnRow_Bounded == 'function')   
9.   {  
10.     tr = OnRow_Bounded(rowData, tr);  
11.   }  
12.   return tr;  
13. }  
14.   
15. function OnRow_Bounded(rowData, row)   
16. {  
17.   var status_checkbox = $("<input type='checkbox'/>").attr('checked', rowData["isActive"]).bind('click', rowData, EmployeeStatus_Change);  
18.   $("td:contains(" + rowData["isActive"] + ")", row).text('').append(status_checkbox);  
19.   return row;  
20. }  
21.   
22. function EmployeeStatus_Change(event)  
23. {  
24.   var rowData=event.data;  
25.   confirm('Do you want to change the ' + rowData.FirstName + ' status?');  
26. }  

function Row(rowData) 
{
  var tr = $("<tr></tr>");
  for (var i in rowData) 
  {
    tr.append($("<td></td>").text(rowData[i]));
  }
  if (typeof OnRow_Bounded == 'function') 
  {
    tr = OnRow_Bounded(rowData, tr);
  }
  return tr;
}

function OnRow_Bounded(rowData, row) 
{
  var status_checkbox = $("<input type='checkbox'/>").attr('checked', rowData["isActive"]).bind('click', rowData, EmployeeStatus_Change);
  $("td:contains(" + rowData["isActive"] + ")", row).text('').append(status_checkbox);
  return row;
}

function EmployeeStatus_Change(event)
{
  var rowData=event.data;
  confirm('Do you want to change the ' + rowData.FirstName + ' status?');
}

and following picture shows the extended result

Continue to Part no.5