如何通过 Rails 中的 JavaScript 函数添加 collection_select 和 text_area？

Question

我想创建一个表格，其中可以通过按钮添加行和按钮（一个用于行，一个用于列）。 这些列由一个collection_select （到 select 一个设备）作为标题和每行中的text_field （用于每行中此设备的测试结果）。 这些列由几个text_field和一个text_area组成（用于不同的测试规范）。

我使用此代码在_form.html.erb中添加一列：

<%= bootstrap_form_with(model: Testreport.new, local: true) do |f| %>

<table class="table" id="testreport_table">
...
<input type=button id='col_1_button' value="+" onclick="insertColumn();">
...
</table>

function insertColumn() {
          let table = document.getElementById('testreport_table'),
              columns_count = table.rows[1].cells.length,
              rows_count = table.getElementsByTagName('tr').length,
              i;
          document.getElementById('button_row').colSpan = columns_count + 1;
          <% a = f.collection_select( :devicesample_id, Devicesample.order(:name), :id, :name, include_blank: false, label: "Device Sample") %>
          table.rows[1].insertCell(columns_count).innerHTML = '<%= a %>'
          for (i = 2; i < (rows_count - 1); i++) {
              table.rows[i].insertCell(columns_count).innerHTML = "Added Column";
          }
          return false;
      }

但是，呈现页面会引发此错误 (Chrome)： Uncaught SyntaxError: Invalid or unexpected token

错误在此生成的行中：

table.rows[1].append('<select name="testreport[devicesample_id]" id="testreport_devicesample_id"><option value="4">Hisense 6486 LATAM</option>

整个生成的代码：

function insertColumn() {
          let table = document.getElementById('testreport_table'),
              columns_count = table.rows[1].cells.length,
              rows_count = table.getElementsByTagName('tr').length,
              i;
          document.getElementById('button_row').colSpan = columns_count + 1;
          table.rows[1].insertCell(columns_count).innerHTML = '<div class="form-group"><label for="testreport_devicesample_id">Device Sample</label><select class="form-control" name="testreport[devicesample_id]" id="testreport_devicesample_id"><option value="4">Device A LATAM</option>
<option value="1">Device B </option>
<option value="3">Device C </option></select></div>';
          for (i = 2; i < (rows_count - 1); i++) {
              table.rows[i].insertCell(columns_count).innerHTML = "Added Column";
          }
          return false;
      }

当我将完全相同的collection_select复制到常规正文时，它显示正常。 是什么导致了这个错误？ 如果我想添加一个text_area我有同样的问题，而text_field工作正常。

我怀疑这与这些字段的多行属性有关，但即使是这样，我也不知道如何避免这种情况。

我是 Ruby、Rails 和 Javascript 的新手。 我用：

ruby 2.6.5p114 (2019-10-01 revision 67812) [x64-mingw32]
Rails 6.0.2.1
Chrome Version 79.0.3945.130

（编辑：替换table.rows[1].append('<%= a %>');用table.rows[1].insertCell(columns_count).innerHTML = '<%= a %>'':这是原始代码）

Answer 1

您收到Uncaught SyntaxError: Invalid or unexpected token错误，因为您的代码中有一个多行字符串。

所以改变报价

table.rows[1].insertCell(columns_count).innerHTML = '<%= a %>'

到

table.rows[1].insertCell(columns_count).innerHTML = `<%= a %>`

您还可以删除新行：

table.rows[1].insertCell(columns_count).innerHTML = '<%= a.tr("\n","") %>'

当然，最好将 HTML 生成移到 javascript 端，但这是另一个话题:)

Answer 2

submitBtn.addEventListener("click",()=>{ //查看答案

const answer=getSelected();

if(answer){
    if(answer === quizData[currentQuiz].correct){
        score++;
    }

    currentQuiz++;

if(currentQuiz < quizData.length){
    loadQuiz();
}
    else{
        quiz.innerHTML ='
        <h2> you answered correctly at $
        {score}/${quizData.length}
        questions.</h2>

        <button onclick="location.reload()">Reload</button>
        ';
    }


    }

});