还需要完善的包括，css的封装，触发事件，数据的获得处理：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> <script type="text/javascript" src="../js/jquery-1.10.2.js"></script> <script> var getColumns = [{ title: '商品代码', field: 'PARTCODE', hide: true }, { title: '品名', field: 'PARTNAME', hide: true }, { title: '名牌', field: 'BRAND', hide: true }, { title: '出库设备', field: 'EQUIPNAME' }, { title: '规格', field: 'FORMAT' }, { title: '工厂', field: 'FACTORY', hide: true }]; //json字符串数组 var dataArr = [{ "FACTORY": "BTSL1", "PARTCODE": "p1", "PARTNAME": "f1", "FORMAT": "b1", "BRAND": "pa", "PLACE": "fangzhi", "OUTNUMBERS": "12", "OUTTIME": "20171212", "WARENAME": "c1", "EQUIPNAME": "as", "CLASSNAME": "1", "OUTUSE": "定期更换" }, { "FACTORY": "BTSL2", "PARTCODE": "p1", "PARTNAME": "f12", "FORMAT": "的", "BRAND": "名称", "PLACE": "防止", "OUTNUMBERS": "12", "OUTTIME": "20161216", "WARENAME": "c1", "EQUIPNAME": "as", "CLASSNAME": "1", "OUTUSE": "损坏更换" }, { "FACTORY": "BTSL12", "PARTCODE": "p2", "PARTNAME": "f12", "FORMAT": "b12", "BRAND": "怕", "PLACE": "102", "OUTNUMBERS": "12", "OUTTIME": "20151216", "WARENAME": "c1", "EQUIPNAME": "as", "CLASSNAME": "1", "OUTUSE": "出库玩一玩" } ]; //根据key值获取对应的value function getValue(jsonObj, key) { return jsonObj[key]; } function getData() { //定义标题数组 var tilteArr = new Array(); //定义数据数组 var fieldArr = new Array(); //是否隐藏数组 var hideArr = new Array(); //遍历给定的数组抽出标题和字段 for(var j = 0; j < getColumns.length; j++) { tilteArr[j] = getColumns[j].title; fieldArr[j] = getColumns[j].field; hideArr[j] = getColumns[j].hide; } //动态设置table的位位置 //先获得参照物的位子 var X = $('#id').offset().top; var Y = $('#id').offset().left; $("#tab").css({ position: "absolute", 'top': X + 20, 'left': Y, 'z-index': 2, 'display': 'block' }); //将json字符串数组解析为 //<tr><td></td></tr>的格式 var html = ""; //初始化标题行 html += "<tr>"; for(var j = 0; j < tilteArr.length; j++) { if(hideArr[j]) { html += "<td style='display:none;'>" + tilteArr[j] + "</td>"; } else { html += "<td>" + tilteArr[j] + "</td>"; } } html += "</tr>"; //初始化数据行 for(var i = 0; i < dataArr.length; i++) { html += "<tr>"; //遍历列 for(var j = 0; j < fieldArr.length; j++) { if(hideArr[j]) { html += "<td style='display:none;'>" + getValue(dataArr[i], fieldArr[j]) + "</td>"; } else { html += "<td>" + getValue(dataArr[i], fieldArr[j]) + "</td>"; } } html += "</tr>"; } //先找到文本的元素 //删除table的所有行 $("#tab tr").remove(); //将htmlStr添加到标题行后面 $("#tab").append(html); //为table添加样式 //给class为stripe的表格的偶数行添加class值为odd //$("#tab tr:even").addClass("myred"); //给class为stripe的表格的奇数行添加class值为alt //$("#tab tr:odd").addClass("mygreen"); text-align:center $("#tab tr:even").css("backgroundColor", "lightskyblue"); $("#tab tr:odd").css("backgroundColor", "gainsboro"); $("#tab tr td").css("text-align", "center"); $("#tab tr td").css("margin;", "9"); $("table tr:eq(0) td").each(function() { $(this).css("font-weight", "bold"); }); //动态为table的td添加双击事件 $("#tab tr td").dblclick(function() { //$("#id").val($(this).html()); //$("#table1 tr:eq(1) td:nth-child(1)").html(); //$("#id").val($("this:nth-child(1)").html()); var wid = $(this).parents("tr").children(0).html(); //alert(wid); $("#id").val(wid); $("#tab").hide(); }); } </script> </head> <body> <input id="id" class="a" type="text" onkeyup="getData()" /> <table id="tab" style="position: absolute;display: none;" cellspacing="0"></table> <p>zheshi yige </p> <br /> <br /> <br /> <br /> <br /> <input type="button" /> www.baidu.com </body> </html>