如何使用jQuery / JS从TD获取我的Id和两个文本框的值

时间:2019-05-09 07:19:26

标签: javascript jquery ajax jsp servlets

我有一个由jsp中的forloop制作的td。我想通过jax获取其id和值,以便可以从servlet运行edit方法。但是,一旦我声明了该ID和文本框值的变量。它什么也没返回。

我正在使用tomcat 7,java 7,oracle和Windows10。安装了jquery 3.4.0。

// code from jsp
<table border="1" cellspacing="0">
            <tr bgcolor="pink">
                <td>社員No.</td>
                <td>ユーザーID</td>
                <td>社員名</td>
                <td>削除機能</td>
                <td>更新機能</td>
            </tr>
            <%
                for (Staff s : list1) {
            %>
            <tr>
                <td id="<%=s.getId()%>"><%=s.getId()%></td>
                <td><%=s.getNo()%></td>
                <td><%=s.getName()%></td>
                <td><a href="deleteStaffServlet?id=<%=s.getId()%>" class="button">削除</a></td>
                <td>名前:<input type="text" size="10" class="userNo" name="no2"/> ユーザーID:<input
                    type="text" size="10" class="userName" name="name2" />
                    <button class="edit">更新</button>
                </td>
            </tr>
            <%
                }
                }
                session.removeAttribute("list");
            %>
        </table>

// ajax code
$(function(){
         $(".edit").click(function(){
            var userId = $(this).parent('td').first().attr("id");
            var userNo = $(this).class('userNo').val();
            var userName = $(this).class('userName').val();
            alert(useId);
            alert(userNo);
            alert(userName);
            $.ajax({
                type : "post",
                url : "editStaffServlet",
                cache : false,
                data : {
                    "userId" :userId,
                    "no2" : userNo,
                    "name2" : userName
                },
                dataType : 'json',
                success : function(data) {
                    if (data && data.success) {
                        alert("OK");
                    } else {
                        alert("Error " + data.msg);
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("Error");
                }
            })
         })
    });

// code from servlet
protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String ids = request.getParameter("userId");
        int id = Integer.parseInt(ids);
        String no = request.getParameter("no2");
        String name = request.getParameter("name2");

        StaffDao staffDao = new StaffDao();
        Staff st = new Staff(id, no, name);

        st.setId(id);
        st.setNo(no);
        st.setName(name);
        staffDao.edit(st);
        response.sendRedirect("package/staff.jsp");
    }

    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

当我运行调试器时,它得到了空ID,因此警报没有显示出来。 如何正确获取这些ID和值以运行Ajax?

1 个答案:

答案 0 :(得分:0)

$(this).parent('td')没有id属性。

您需要先找到父tr,然后找到其中的第一个td。

$(this).closest('tr').find('td').first().attr('id')