如何在表格行中生成动态按钮并在单击按钮时打开新页面

Question

i actually having a requirement of generating dynamic table from services url and after that generating dynamic table.This is i worked it out but what i want is

1. How to generate a dynamic button on each table row with click event.
2. After generating the button how we can assign click events to the button i mean suppose in a table there are four columns like date,id number,name,location and on the clicking on the each column or related to that cell it has to redirect to a new page.

or

3. if a table row is clicked and there are 4 columns are there like date,id number,name,location the click event has will take date as a parameter and click event function and then it have to proceed to the next page/redirect

    $('#btn_Day').click(function () { var ex = document.getElementById("dpp_info"); var clOptions = ex.options[ex.selectedIndex].value; var clOptions1 = ex.options[ex.selectedIndex].text; var dt = todaydate; var dt1 = todaydate; $.ajax({ type: 'GET', url: xxxxx.xxxxx.xxxxx, data: frmDate_=" + dt + "&toDate_=" + dt1 + "", success: function (resp) { var Location = resp; var tr; for (var i = 0; i < Location.length; i++) { tr = tr + "<tr>"; tr = tr + "<td style='height:20px' align='left'>" + Location[i].Name + "</td>"; tr = tr + "<td style='height:20px' align='left'>" + Location[i].Date + "</td>"; tr = tr + "<td style='height:20px' align='left'>" + Location[i].IdNum + "</td>"; tr = tr + "</tr>"; }; document.getElementById('Wise').innerHTML = "<table class='r'>" + "<tr><thead ><th style='height:20px'>Location</th>" + "<th style='height:20px'>Date</th>" + "<th style='height:20px'>Id Num</th>" + "</tr></thead>" + tr + "<tr></tr>" + "</table>"; document.getElementById('Wise').childNodes[0].nodeValue = null; }, error: function (e) { window.plugins.toast.showLongBottom("Please Enable your Internet connection"); } }); }); 

   

now in the image if u see there are four columns suppose if i click on the idnumb and there records related to that particular number has to be displayed in separate page

Looking For Help!

Answer 1

After some more discussion on this the key was to just use the handler and pass any values using attributes. You can see the fiddle here

https://jsfiddle.net/p2fpbkuo/3/

$('.button-click').off();
$('.button-click').on('click', function () {
    // navigate to new page
 // console.log('button click')

 // what you could do here is get the serialnumber which is an attribute on the button 
 var id = $(this).attr('data-id') // as long as this is unique this should always work

 var filteredResults = results.filter(function (result) {
  if (result.SerialNumber.toString() === id.toString()) {
    return result;
  }
});

var selectedRowValues = filteredResults[0];

// this will contain all the values for that row
console.log(selectedRowValues)

 // var dataValue = $(this).attr('data-url'); // dont't need this any more
 window.open(selectedRowValues.Url)
});