访问脚本标签中的ejs变量

Question

有人知道如何在脚本标签中访问ejs变量吗?

我试图让我的每一个编辑按钮改变在特定行的每个'td'上的contentitable属性为true。

我遇到的问题是，我不知道如何从我的脚本中的ejs访问变量

我要做的是:

<script>
var row = document.getElementById(<$= index %>);
</script>

然后从那里，将属性'contenteditable'的子行设置为true。这可能吗?有没有更好的办法?

这是我所有的代码:

<tr class=<%- index %>>
<td><%= index %></td>
<td contenteditable="false" id="item"><%= item %></td>
<td contenteditable="false" id="desc"><%= desc %></td>
<td contenteditable="false" id="status"><%= status %></td>
<td contenteditable="false" id="priority"><%= priority %></td>
<td><button id="delete-button">Delete</button>
<button id=<%- index %>>Edit</button>
</td>
</tr>
<script>
var row = document.getElementById(<$= index %>);
</script>

And my table:

<table id="todo-list">
<tr>
<th>No.</th>
<th>Item</th>
<th>Description</th>
<th>Status</th>
<th>Priority</th>
<th>Actions</th>
</tr>
<% for (var i = 0; i <data.length; i++) { %>
<%  const {item, desc, status, priority} = data[i]; %>
<% (function() { %>
<%- include('partials/todo.ejs', {index: i, item:item, desc: desc, status:status, priority:priority}) %>
<% })(); %>
<%} %>
</table>

Answer 1

我认为不可能将ejs变量放入已经运行的脚本标记中。详细的答案可以在这里找到。

如果您希望将单元格更改为contenteditable = true，您可以尝试使用以下命令:

<tr>
<td><%= index %></td>
<td contenteditable="false" class="editable" id="item">
<%= item %>
</td>
<td contenteditable="false" class="editable" id="desc">
<%= desc %>
</td>
<td contenteditable="false" class="editable" id="status">
<%= status %>
</td>
<td contenteditable="false" class="editable" id="priority">
<%= priority %>
</td>
<td><button id="delete-button">Delete</button>
<button onclick="editRow(this)">Edit</button>
</td>
</tr>
<script>
function editRow(btn) {
var row = btn.parentNode.parentNode; // This is the row you need
var cells = row.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
if (cells[i].classList.contains('editable')) { //Checks if it is the right cell
cells[i].contentEditable = true;
}
}
}
</script>

我添加了class="editable"以避免使第一个和最后一个单元格可满足