表格点击当前行,在其下边展示其子信息列表(即下拉显示数据)
2016-07-28 20:07
801 查看
1、html代码:(主题列表信息)
2、js代码:(获取该主题下的成分股列表)
<td class="aw-url"><a href="javascript:;" onclick="getStockList('${theme.code}','${theme.name}')">${theme.name}</a></td>
2、js代码:(获取该主题下的成分股列表)
//获取成分股 function getStockList(id,name){ var detil_ = $("tr[name=detil_"+id+"]"); if(detil_ && detil_.length>0){ detil_.remove(); return; } $.ajax({ url : '@{StockAction.query()}?id='+id+'&name='+name, type : 'post', dataType : 'json', success : function(data) { var tboty=[]; tboty.push("<tr name=\"detil_"+id+"\">"); tboty.push('<th>股票代码</th>'); tboty.push('<th>股票名称</th>'); tboty.push('<th>开始日期</th>'); tboty.push('<th>结束日期</th>'); tboty.push('<th>关联原因</th>'); tboty.push('<th>状态</th>'); tboty.push('<th>创建者</th>'); tboty.push('<th>添加时间</th>'); tboty.push('<th>修改时间</th></tr>'); for(var i=0;i<data.length;i++){ tboty.push("<tr class='item' name=\"detil_"+id+"\">"); tboty.push('<td>'+data[i].stock_code+'</td>'); tboty.push('<td>'+data[i].stock_name+'</td>'); tboty.push("<td>"+data[i].start_date+"</td>"); tboty.push("<td>"+data[i].end_date+"</td>"); tboty.push("<td>"+data[i].related_reasons+"</td>"); tboty.push("<td>"+data[i].status+"</td>"); tboty.push("<td>"+data[i].account_id+"</td>"); tboty.push("<td>"+data[i].insert_time+"</td>"); tboty.push("<td>"+data[i].update_time+"</td></tr>"); } $("#trd_"+id).after(tboty.join('')); }, error: function (data) { alert("获取异常!"); } }) }
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子