單擊功能如何將表行數據從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>