单击功能如何将表行数据从jsp传递到servlet

Question

/ *脚本功能* /我想将表数据值存储在脚本变量中，它将在servlet中发送数据

<script>
        $(document).ready(function () {
            $('#edit').click(function () {

                var id=$(this).attr('#id');
                var studentName= $(this).attr('#id');
                var age= $('#age').val();
                $.ajax({
                    type:'POST',
                    data:{
                        id: id,
                        studentName:studentName,
                        age:age
                    },
                    url:'EditStudent'


                });
            });
        });
    </script>

这显示了来自servlet的数据，而且我想在脚本变量中发送表数据

 <c:forEach items="${studentList}" var="student">
            <tr>
                <td id="id" ><c:out value="${student.roll_no}"/></td>
                <td contenteditable="true" id="studentName" ><c:out value="${student.studentName}"/></td>
                <td contenteditable="true" id="age"><c:out value="${student.age}"/></td>
                <td><a href="<c:url value="/DeleteStudent?id="/><c:out value="${student.roll_no}"/>"> Delete</a></td>
                <%--<td><a href="<c:url value="/EditStudent?id="/><c:out value="${student.roll_no}"/>">Edit</a>--%>
                <td><input type="button" id="edit"  value="edit">
                </td>
            </tr>
        </c:forEach>

Answer 1

该id在<input type="button" id="edit" value="edit">需要是唯一的，在这里，因为使用的是c:forEach它将会创建多个行，其中的id将是相同的。

代替id使用class 。 Sa，e还需要在那里供其他tds 。

<c:forEach items="${studentList}" var="student">
        <tr>
            <td class="id" ><c:out value="${student.roll_no}"/></td>
            <td contenteditable="true" class="studentName" ><c:out value="${student.studentName}"/></td>
            <td contenteditable="true" class="age"><c:out value="${student.age}"/></td>
            <td><a href="<c:url value="/DeleteStudent?id="/><c:out value="${student.roll_no}"/>"> Delete</a></td>
            <%--<td><a href="<c:url value="/EditStudent?id="/><c:out value="${student.roll_no}"/>">Edit</a>--%>
            <td><input type="button" class="edit"  value="edit">
            </td>
        </tr>
    </c:forEach>

在js中

$(document).ready(function () {
            $('.edit').click(function () {

                var id=$(this).closest('.id');
                var studentName= $(this).closest('.studentName');
                var age= $(this).closest('.age');;
                $.ajax({
                    type:'POST',
                    data:{
                        id: id,
                        studentName:studentName,
                        age:age
                    },
                    url:'EditStudent'


                });
            });
        });

Answer 2

使用类而不是ID

 <c:forEach items="${studentList}" var="student">
            <tr class="tr">
                <td class="id" id="id" ><c:out value="${student.roll_no}"/></td>
                <td contenteditable="true" class="studentName" ><c:out value="${student.studentName}"/></td>
                <td contenteditable="true" class="age"><c:out value="${student.age}"/></td>
                <td><a href="<c:url value="/DeleteStudent?id="/><c:out value="${student.roll_no}"/>"> Delete</a></td>
                <td> <input type="button" id="edit"  class="edit" value="edit"> </td>
            </tr>
        </c:forEach>

  <script>
        $(document).ready(function () {
            $('.edit').click(function () {

                var id = $(this).closest(".tr").find('.id').text();
                var studentName = $(this).closest(".tr").find(".studentName").text();
                var age = $(this).closest(".tr").find(".age").text();
                $.post("EditStudent", {
                    id: id,
                    studentName: studentName,
                    age: age

                });
            });
        });
</script>