How can a dropdown list be displayed at a dynamic table?

Question

I have code for table

<fieldset class="tabular"><legend><%= l(:redmine_taskjuggler) %></legend>
<%= labelled_fields_for(@issue) do |f| %>

<div id="taskjuggler" class="attributes">
<div class="splitcontent">
<div class="splitcontentright">

<table id="ResTable" cellspacing="0" border="1" width="850">
<thead>
<tr>
<th width="450" align = center> TJ allocation <a href="#" onClick="javascript:confirm('<%= l(:tooltip_tj_allocates) %>')">(?)</a> </th>
<th width="200" align = center> TJ efficiency <a href="#" onClick="javascript:confirm('<%= l(:tooltip_tj_efficiency) %>')">(?)</a> </th>
<th width="200" align = center> TJ limits <a href="#" onClick="javascript:confirm('<%= l(:tooltip_tj_limits) %>')">(?)</a> </th>
</tr>
</thead>
<tbody>
<tr>
<% users_array = User.all.map { |user| [user.firstname + ' ' + user.lastname, user.login.sub('-','_') ] } %>
<td> <%= select(:issue,:tj_allocates,users_array) %> </td>
<td> <%= f.text_field :tj_efficiency %> </td>
<td> <%= f.text_field :tj_limits %> </td>
</tr>
    </tbody>
</table>

<a href="#" onclick="javascript:addRow('ResTable')"> Add string </a>

</div>
</div>
</div>

At the same page script to add rows dynamically

 <script type="text/javascript">
 function addRow(id){
 var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
 var row = document.createElement("TR")
 var td1 = document.createElement("TD")
 var td2 = document.createElement("TD")
 var td3 = document.createElement("TD")

 td1.innerHTML = '<%= select(:issue,:tj_allocates,users_array) %>'
 td2.innerHTML = '<%= f.text_field :tj_efficiency %>'
 td3.innerHTML = '<%= f.text_field :tj_limits %>'

 row.appendChild(td1);
 row.appendChild(td2);
 row.appendChild(td3);

 tbody.appendChild(row);
 }
 </script>

<% end %>
</fieldset>

But it's not working, because not work

 td1.innerHTML = '<%= select(:issue,:tj_allocates,users_array) %>'

and I have an error

SyntaxError: unterminated string literal  
td1.innerHTML = '<select id="issue_tj_allocates" name="issue[tj_allocates]">
----------------^

I looked to the code of the html-page, and I saw that I've created

td1.innerHTML = '<select id="issue_tj_allocates" name="issue[tj_allocates]"><option value="admin">Redmine Admin</option>
<option value=""> Anonymous</option>
<option value="namiko">Namiko Namiko</option>
<option value="kitsune">Kitsune Kitsune</option>
<option value="tanuki">Tanuki Tanuki</option>
<option value="ookami">Ookami Ookami</option>
<option value="kirin">Kirin Kirin</option></select>'

How can I create a downdrop in this table?

Answer 1

You can create a template and then use it like this:-

<script type="text/template" id="some_select">
  <%= select(:issue,:tj_allocates,users_array) %>
</script>

and then refer this template like this

td1.innerHTML = document.getElementById('some_select').innerHTML;

Hope this will help.