获取input框里遍历出来某一列的值

有时候只有一个input框,但input框有时候需要存放很多的值,如:

<table>
 <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>出生日期</td>
        <td>操作</td>
 </tr>
  <th:block th:each="test:${test_oneAllList}">
    <tr>
        <td class="testId" th:text="${test.testId}"></td>
        <td><span th:text="${test.testName}"></span></td>
        <td><span th:text="${test.testAge}"></span></td>
        <td><span th:text="${#dates.format(test.testDate,'yyyy-MM-dd')}"></span></td>
        <td>
        <button onclick="select(this)"
                    class="btn btn-default" data-toggle="modal" data-target="#myModal">修改</button>
            <button onclick="deletes(this)">删除</button>
        </td>
    </tr>
    </th:block>
 </table>

结果如图:

在这里插入图片描述比如要根据编号对信息进行修改,如果用form表单提交可以用这种方式:

 <a th:href="@{/Test/update(testId=${test.testId})}">修改</a>

但这种提交方式是需要跳转页面的,有很多情况是不能跳转页面修改的,这样会影响页面的美观,所以一般情况下修改是用模态框+Ajax来实现的。但用Ajax怎么获取一个文本框遍历出来某一列的id呢?

var testId = $(".testId").html();

这种情况肯定是不行的,因为这是遍历出来的值,所以只能获取到第一列id的值。

所以正确的遍历方式是

    //修改
    function select(res){
        var testId = $(res).parent().siblings(".testId").html();
        alert(testId);
    }

html页面引用

 <button onclick="select(this)">修改</button>

完整的Ajax的方法如下:

 //查询
    function select(res) {
        var testId = $(res).parent().siblings(".testId").html();
        $.ajax({
            url:"/Test/selectId",
            data:{
                testId:testId
            },
            success: function(data){
                //把根据id查询的值赋给模态框中的input框内
                $("#testId").val(data.testId);
                $("#testName").val(data.testName);
                $("#testAge").val(data.testAge);
                var time = new Date(data.testDate).toJSON();
                var d = new Date(time);
                //格式化日,如果小于9,前面补0
                var day = ("0" + d.getDate()).slice(-2);
                 //格式化月,如果小于9,前面补0
                var month = ("0" + (d.getMonth()+1)).slice(-2);
                var times=d.getFullYear() + '-' + (month) + '-' + (day);
                $("#testDate").val(times);
            },
            error:function (data) {
                alert("没有该商品信息");
            },
        });
    }
发布了22 篇原创文章 · 获赞 2 · 访问量 1140

猜你喜欢

转载自blog.csdn.net/javaasd/article/details/105126478