通过鼠标点击使用ajax获取table其中一行tr的数据传入action

这个是前端,通过ajax获取团建单位和团检登记时间传到后台action接收,查询到的东西返回页面,通过for in打印到页面

里,现在的问题就是怎么再通ajax获取到刚才打印出来的数据,
(鼠标点击打印出来表格的其中一行获取这行的数据并发送到action)就这步的代码我不会……

需求:
我第一次靠两个参数查询出数据,显示在一个table中,接下来我需要鼠标点击这个table中的tr,以这个tr中的td,查询出另外的数据显示在另一个table,我现在是不会用鼠标点击取得第一次打印出的行的数据

<body>
    <div>
        <table class="table">
            <tr>
                <th>团建单位:</th>
                <td><input type="text" id="comname"></td>
                <th>团检登记时间:</th>
                <td><input type="date" id="date"></td>
                <th><input class="button button-silver" type="button"
                    id="query_comname" value="查询" style="width:40%;">
                </td>
                <th><input class="button button-silver" type="button"
                    value="退选中" style="width:40%;"></th>
            </tr>
        </table>
    </div>
    <div id="itemRefundDiv1">
        <table class="table" id="tab1000">
            <thead>
                <tr>
                    <th class="box"><input type="checkbox" style="zoom:170%;"></th>
                    <th>体检人</th>
                    <th>体检号</th>
                    <th>登记时间</th>
                    <th>开始体检时间</th>
                </tr>
            </thead>
            <tbody>
<!--            打印第一个BOX的内容 -->
            </tbody>
        </table>
    </div>
    <div id="itemRefundDiv2">
        <table border="1px" class="table">
            <tr>
                <td class="box"><input type="checkbox" style="zoom:170%;"></td>
                <th>套餐或项目名称</th>
                <th>数量</th>
                <th>金额</th>
                <th>登记人</th>
                <th>登记时间</th>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        $(function() {
            $("#query_comname").click(function() {
                var cn = $("#comname").val();
                var dt = $("#date").val();
                $.ajax({
                    url : "itemRefund/query_com",
                    type : "post",
                    data : {
                        "com_name" : cn,
                        "reg_time" : dt
                    },
                    success : function(data) {
                        if (data.NOTFOUND == "true") {
                            alert("找不到合符条件的信息");
                        } else {
                        //alert(data.listRefund[0].emp_name);
                            var listRefund = data.listRefund;
                            var str = "";
                            for (var i in data.listRefund) {
                                str += "<tr id =" + "listRefund" + i + ">";
                                str += "<td class='box'>" + "<input type='checkbox' style='zoom:170%;'>" + "</td>";
                                str += "<td align='center' id=A" + data.listRefund[i].emp_name + ">" + data.listRefund[i].emp_name + "</td>";
                                str += "<td align='center' id=B" + data.listRefund[i].reg_no + ">" + data.listRefund[i].reg_no + "</td>";
                                str += "<td align='center' id=C" + data.listRefund[i].reg_time + ">" + data.listRefund[i].reg_time + "</td>";
                                str += "<td align='center' id=D" + data.listRefund[i].bat_begin + ">" + data.listRefund[i].bat_begin + "</td>";
                                str += "</tr>";
                            }
                            $("#tab1000 tbody").empty();
                            $("#tab1000 tbody").append(str);
                        }
                    }
                });
            });
        });
    </script>
</body>

下面是action类

@Controller
@RequestMapping("itemRefund")
public class itemRefundAction {

    @Autowired
    IItemRefundService iitemRefundService;

    @RequestMapping(value="query_com",method=RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> query(itemRefund it){
        System.out.println("查询公司" + it);
        //通过团检单位和团检登记时间查询内容用来退项
        List<itemRefund> list = iitemRefundService.queryRefund(it);

        Map<String, Object> map = new HashMap<String, Object>();  

        if(!list.isEmpty()){  
            map.put("NOTFOUND", "false");  
            map.put("listRefund", list);  
        }else{  
            map.put("NOTFOUND", "true");  
        }  
        System.out.println("map="+map);
        return map; 
    }

    @RequestMapping(value="query_Refund",method=RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> queryRefund(itemRefund it){
        System.out.println("收到的数值");
    //这里接收第二次发送的数据
        Map<String, Object> map = new HashMap<String, Object>(); 



         return map; 
    }
}

3个回答

把数据用全局变量gdata存起来,每一行tr标签加的索引值(如 data-index = 0,1,2,3等),tr添加事件监听,点击时获取到索引值 index,就可以通过gdata[index]得到对应的数据了。

不知道是不是你的ajax的路劲是不是有问题啊,控制器/方法

既然数据都打印出来了,为啥还要二次ajax请求,把数据保存到变量中后面在二次使用不行吗?还是对你的理解有误?

alan3494
alan3494 是这样的,我第一次靠两个参数查询出数据,显示在一个table中,接下来我需要鼠标点击这个table中的tr,以这个tr中的td,查询出另外的数据显示在另一个table,我现在是不会用鼠标点击取得第一次打印出的行的数据
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!