Question

我使用JavaScript和Jquery，尝试为每行添加一个按钮。我想将click事件添加到每一行的按钮。这是我的代码：

reportModal = UIkit.modal("#report_modal");
$('#report_modal').empty();

var gridHtml = "<table id='table1'>"
                  +"    <thead>"
                  +"      <tr>"
                  +"          <th>FirstName</th>"
                  +"          <th>Age</th>"
                  +"          <th>Tel</th>"                 
                  +"          <th>Button</th>"  
                  +"      </tr>"
                  +"      </thead>"
                  +"     <tbody></tbody>"
                  +"</table>";

$('#report_modal').html(gridHtml);                

var data = {};
       data.d = [{FirstName: 'AAA', Age: '20', Tel: '111'}, 
                {FirstName: 'BBB', Age: '98', Tel: '222'},
                {FirstName: 'CCC', Age: '45', Tel: '333'}];     
var trHTML = '';

for(var i = 0; i < data.d.length; i++){

  trHTML += '<tr><td>' + data.d[i].FirstName + '</td><td>' + data.d[i].Age + '</td><td>' + '<a onclick="showMsg(${data.d[i].FirstName})" href="#"><i class="flaticon-icon-path"></i></a>' + '</td></tr>';
}               

$('#report_modal').append(trHTML);

function showMsg(msg){
  alert(msg);
}

我的问题是，当单击按钮时，showMsg函数被调用，但是显示“未定义”；

请解决任何问题。谢谢。

Answer 1

这是语法错误：使用onclick="showMsg(\''+data.d[i].FirstName+'\')"

赞：

   trHTML += '<tr><td>' + data.d[i].FirstName + '</td><td>' + data.d[i].Age + '</td><td>' + '<a onclick="showMsg(\''+data.d[i].FirstName+'\')" href="#"><i class="flaticon-icon-path"></i></a>' + '</td></tr>';

Answer 2

您需要使用"Template literals"``才能使用字符串插值。此外，在这种情况下，您可以使用多行字符串！

trHTML += `<tr>
  <td>${data.d[i].FirstName}</td>
  <td>${data.d[i].Age}</td>
  <td>
    <a onclick="showMsg(${data.d[i].FirstName})" href="#">
      <i class="flaticon-icon-path"></i>
    </a>
  </td>
</tr>`;

或使用经典字符串串联

trHTML += '<tr><td>' + data.d[i].FirstName + '</td><td>' + data.d[i].Age + '</td><td>' + '<a onclick="showMsg(' + data.d[i].FirstName + '" href="#"><i class="flaticon-icon-path"></i></a>' + '</td></tr>';

使用javascript和jquery将按钮添加到每一行

2 个答案: