还需要完善的包括，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>