Я хочу создать таблицу, в которую строки и кнопки можно добавлять с помощью кнопки (одна для строк, одна для столбцов). Столбцы состоят из одного collection_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
( edit: заменен table.rows[1].append('<%= a %>'); на table.rows[1].insertCell(columns_count).innerHTML = '<%= a %>'':, который был исходным кодом)