javascript - 使用jquery将动态数据附加到表体中

Question

我正在尝试使用 jquery 和以下代码将动态数据附加到表主体中。不知道我错在哪里。

var tr = '<tr class="v-middle">';
      tr += '<td><span><i class="'.icon_code.' _icons"></i></span></td>';
      tr += '<td class="flex text-color">'+icon_name+'</td>';
      tr += '<td class="text-color">'+icon_code+'</td>';
      tr += '<td class="text-color">'+icon_code_css+'</td>';
      tr += '<td><span class="text-color">Material Design</span></td>';
      tr += '<td><span class="badge bg-primary-lt">Copy</span> <span class="badge bg-primary-lt">Copy script</span></td>';
      tr += "</tr>";
     $('#icontable tbody').append(tr);

出现以下错误

Uncaught SyntaxError: Unexpected string

Answer 1

符号 ' 被视为控制符号，因此必须对其进行转义 (\')。因此，您会得到一个无效值而不是字符串。

这样正确:

var tr = '<tr class="v-middle">';
      tr += '<td><span><i class=\'.icon_code.\'_icons></i></span></td>';
      tr += '<td class="flex text-color">'+icon_name+'</td>';
      tr += '<td class="text-color">'+icon_code+'</td>';
      tr += '<td class="text-color">'+icon_code_css+'</td>';
      tr += '<td><span class="text-color">Material Design</span></td>';
      tr += '<td><span class="badge bg-primary-lt">Copy</span> <span class="badge bg-primary-lt">Copy script</span></td>';
      tr += "</tr>";

如果你希望你的类被调用 icon_code 变量的内容，你需要这样做:

var tr = '<tr class="v-middle">';
      tr += '<td><span><i class=.' + icon_code + '. _icons></i></span></td>';
      tr += '<td class="flex text-color">'+ icon_name+'</td>';
      tr += '<td class="text-color">'+icon_code+'</td>';
      tr += '<td class="text-color">'+icon_code_css+'</td>';
      tr += '<td><span class="text-color">Material Design</span></td>';
      tr += '<td><span class="badge bg-primary-lt">Copy</span> <span class="badge bg-primary-lt">Copy script</span></td>';
      tr += "</tr>";