how to pass table row Data from jsp to servlet on click function

Question

/*Script Function */ i want to store table data value in script variable and it will send data in 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>

this is showing data from servlet and further i want to send table data in script variable

 <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

the id in <input type="button" id="edit" value="edit"> need to be unique , here since you are using c:forEach it will create multiple rows where the id will be same.

Instead of id use class . Sa,e need to be there for other tds also.

<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>

In 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

using the class not 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>