javascript - JQuery CSS : I need to add a css style class to my button in the table.

Question

我需要向表格中的按钮添加一个 css 样式类。

我面临两个问题:

1) 如果我使用

添加颜色/类

    document.getElementById('btn11').style.color="blue";

蓝色仅应用于第一行按钮。

2) 如何在 var 中添加 Google Material Design 按钮？

        ex: var buttonVar = ('<md-button id="btn11">'+"Clicking"+'</md-button>');

请多多指教

    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">'+"Stoping"+'</button>');
             }


         trHTML += '<tr><td>' + data[i].test_type + 
         '</td><td>' + data[i].device_id + 
         '</td><td>' + data[i].make + '&nbsp'+data[i].model+
         '</td><td>' + data[i].stack_name +
         '</td><td>' + data[i].suite_name + 
         '</td><td>' + data[i].test_progress + '<br>&nbsp&nbsp&nbsp&nbsp'+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);
            });

 }

Answer 1

您永远不应在每一页中使用多个具有相同 ID 的元素。对于这种功能，给你的按钮类 btn11和 btn12并使用这个

document.getElementsByClassName('btn11').style.color="blue";

使用该类更新所有按钮的颜色。

Material 设计按钮只是一个普通按钮 ( <button> ) 或带有自定义 CSS 样式的链接 ( a )。使用物化主题，你可以用

<a class="waves-effect waves-light btn">Stuff</a>

例如，但这完全取决于您使用的css框架。