I am struggling to apply a CSS style class to my button within a table.
There are two main issues I am encountering:
1) When I try to set the color/class using
document.getElementById('btn11').style.color="blue";
The blue color only gets applied to the first row button.
2) How can I incorporate Google Material Design buttons in a variable?
ex: var buttonVar = ('<md-button id="btn11">'+"Clicking"+'</md-button>');
Please advise
success: function (data) {
var trHTML = '';
$.each(data, function (i, item) {
if(data[i].test_progress=="Complete")
{
var buttonVar = ('<button id="btn11">'+"Clicking"+'</button>');
}
else
{
var buttonVar = ('<button id="btn12">'+"Stopping"+'</button>');
}
trHTML += '<tr><td>' + data[i].test_type +
'</td><td>' + data[i].device_id +
'</td><td>' + data[i].make + ' '+data[i].model+
'</td><td>' + data[i].stack_name +
'</td><td>' + data[i].suite_name +
'</td><td>' + data[i].test_progress + '<br>    '+data[i].tests_run+'/'+data[i].total_tests+
'</td><td>' + data[i].start_time +
'</td><td>' + data[i].end_time +
'</td><td>' + buttonVar +
'</td></tr>';
});
$('#test1').append(trHTML);
document.getElementById('btn11').style.color="blue";
//document.getElementById('btn11').style.className='md-primary md-raised';
// $('btn11').addClass('action-button');
$(document).on('click', '#btn11', function(event) {
alert("The paragraph was clicked."+ i);
});
$(document).on('click', '#btn12', function(event) {
alert("The paragraph was not clicked."+i);
});
}