Как редактировать поля таблицы?

Question

У меня есть таблица для отображения длинного списка элементов, мне интересно, как я могу редактировать поля и отправлять форму для их обновления?

<form name="edit" method="POST" action="edit"> 
    <table border="4"> 
     <tbody> 
      <c:forEach items="${basket.items}" var="item"> 
       <tr> 
        <td> 
         <input name="item.id" value="${item.id}"/> 
        </td> 
        <td> 
         <input label="Price" value="${item.product.price}"/> 
         <br/> 
        </td> 
       </tr> 
      </c:forEach> 
     </tbody> 
    </table> 
    this is a new one 
    <input id="edit" type="submit" name="edit" value="Edit"/> 
</form> 

Answer 1

Вы используете Struts2, с JSTL и EL вместо Struts теги и OGNL ... есть особая причина, которая заставляет вас отказаться от большинства каркасных механики?

Таким образом, ваши входы недействительны (тип не указан), а предложение «это новое» в HTML, по-видимому, указывает на желание вставить новую строку вместо редактирования существующих объектов. Ваше описание и ваш код, кажется, задают две разные вещи: вставить новый, просто сделать вызов другому методу действия (или другому действию), называемому «add» вместо «edit», отправив один единственный элемент и добавив его в коллекцию. Нет необходимости использовать AJAX здесь ...

Если вместо этого, вопрос на самом деле:

как я могу редактировать поля и отправьте форму, чтобы обновить их?

это путь:

<s:form method="POST" action="edit"> 
    <table border="4"> 
     <tbody> 
      <s:iterator value="basket.items" var="item" status="ctr"> 
       <tr> 
        <td> 
         <s:textfield name="item[%{#ctr.index}].id" /> 
        </td> 
        <td> 
         <s:textfield name="item[%{#ctr.index}].product.price" /> 
        </td> 
       </tr> 
      </s:iterator> 
     </tbody> 
    </table> 
    <s:submit value="Edit"/> 
</form> 

Answer 2

Я предлагаю вам сделать вызов AJAX с использованием jquery для обновления нового. А затем в обработчике успеха вы можете добавить новую строку в существующую таблицу. Перед тем, как это сделать, вам нужно указать идентификаторы вашей таблицы, чтобы было проще использовать JQUERY.

var newLine = document.createElement("tr"); 
var cellName = document.createElement("td"); 
$(cellName).text("itemId"); 
$(newLine).append(cellName); 
// similarly create other td's 
$("#modelTable").append(newLine);// replace modelTable by the id of your table