javascript в jsp

153

11 мая 2019, 00:30

Есть у меня JSP страница, на которой есть таблица:

<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col"><spring:message code="queue.id"/></th>
        <th scope="col"><spring:message code="queue.name"/></th>
        <th scope="col" colspan="2"><spring:message code="queue.actions"/></th>
    </tr>
    </thead>
    <c:forEach items="${queues}" var="queue">
        <jsp:useBean id="queue" scope="page" type="ru.myproject.pojo.Queue"/>
        <tr>
            <td>${queue.id}</td>
            <td>${queue.queueName}</td>
            <td><a href="settings/queue/update?id=${user.id}&queueId=${queue.id}"><spring:message code="queue.update"/></a></td>
            <td><a href="settings/queue/delete?id=${user.id}&queueId=${queue.id}"><spring:message code="queue.delete"/></a></td>
        </tr>
    </c:forEach>
</table>

Как сделать, чтоб при нажатии на ссылку UPDATE, ячейки становились редактируемым?

Как вариант нашел вот тут пример javascript, который при клике на ячейке, делает ее редактируемой. Но я с js только начинаю работать и не могу понять как связать между собой js и мою таблицу...

Answer 1

function convertTextToInput(el) { 
  var inp = document.createElement("input"); 
  inp.value = el.textContent; 
  el.textContent = ""; 
  el.appendChild(inp); 
} 
 
window.addEventListener("load", function() { 
  document.querySelectorAll("#test a").forEach( 
    i => i.addEventListener("click", function(e) { 
      e.preventDefault(); 
      var tr = this.closest("tr"); 
      convertTextToInput(tr.cells[0]); 
      convertTextToInput(tr.cells[1]); 
    })); 
});

td { 
  color: darkgray; 
  width: 100px; 
} 
td input { 
  width: 100%; 
  border:none; 
}

<table border="1" id="test"> 
  <tr> 
    <td>aaa</td> 
    <td>bbb</td> 
    <td><a href="#">Edit</a></td> 
  </tr> 
  <tr> 
    <td>ccc</td> 
    <td>ddd</td> 
    <td><a href="#">Edit</a></td> 
  </tr> 
</table>