Question

这让我疯了。

我通过以下方式动态创建表格中的单元格：

tr.append("<td>" + countryArr[i].ISO_id + "</td>");

我创建了一个按钮，单击该按钮会调用值为countryArr[i].ISO_id的函数。该值是一个字符串，需要在“引号”中调用。

我无法使用引号调用函数。

我试过了：

tr.append("<td><button type='button' onclick='showCyclists(" + cId  + ")'>Show country's cyclists</button></td>");
tr.append("<td><button type='button' onclick='showCyclists("" + cId  + "")'>Show country's cyclists</button></td>");
tr.append("<td><button type='button' onclick='showCyclists('" + cId  + "')'>Show country's cyclists</button></td>");

这些都不起作用。请帮忙

Answer 1

使用ES6，你可以使用以下名为template literals的内容，注意反引号`

tr.append(`<td><button type='button' onclick='showCyclists("${cId}")'>Show country's cyclists</button></td>`);

Answer 2

只需添加转义引号showCyclists(\"" + cId + "\")：

tr.append("<td><button type='button' onclick='showCyclists(\"" + cId  + "\")'>Show country's cyclists</button></td>");

Answer 3

您不能使用单引号，因为这些引号用于描述属性。您可以使用转义双引号来实现此功能：

tr.append("<td><button type='button' onclick='showCyclists(\"" + 
          cId  + 
          "\")'>Show country's cyclists</button></td>");

但是，虽然可以通过操作字符串来使您的方法工作，但您在此处尝试使用的解决方案（内联事件处理程序，以及从JavaScript字符串创建的内联事件处理程序）是一种不好的做法。 / p>

为自己省去一些麻烦并正确地构建元素。你的代码可能会延长几行，但它会更清晰。

好方法：

var button = $('<button type="button">')
               .text("Show country's cyclists")
               .on('click', function () { showCyclists(cId) });
var td = $('<td>').append(button);
tr.append(td);

工作示例：

＆＃13;

function showCyclists(id) {
  console.log("Here are all the cyclists.");
  console.log(id);
}

var tr = $('tr');
var cId = '12345';

var button = $('<button type="button">')
               .text("Show country's cyclists")
               .on('click', function() { showCyclists(cId); });
var td = $('<td>').append(button);
tr.append(td);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr></tr>
</table>

＆＃13;

使用带有字符串的事件处理程序动态创建元素

3 个答案: