如何通過 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>
        ';
    }


    }

});