效果如下图：
先说添加表格数据的功能代码吧
思路是这样的，先弄一个只有头没有数据的表格，然后写一个按钮绑定点击事件，点击按钮生成表格数据：
<button id="btn" style="margin-left: 2%;margin-top: 50px;" class="btn btn-primary">添加稽查数据</button>
<div id="d1" class="aa" style="width: 98%;height: 400px;margin-right: 1%;margin-left: 1%;border: 1px solid #000000;overflow-y:scroll;">
<table class="table table-bordered table-hover" id = "test" >
<caption style="text-align: center">稽查数据表</caption>
<thead style="background: rgba(222,227,229,0.96);">
<tr>
<th style="width: 3%;text-align: center"><input type="checkbox" name="" id="check" style="height: 18px;width: 18px;"></th>
<th style="text-align: center">创建时间</th>
<th style="text-align: center">稽查异常项目</th>
<th style="text-align: center">采购单号</th>
<th style="text-align: center">订单号</th>
<th style="text-align: center">快递单号</th>
<th style="text-align: center">货位</th>
<th style="text-align: center">SKU</th>
<th style="text-align: center">数量</th>
<th style="text-align: center">预计完成时间</th>
<th style="text-align: center">责任人</th>
<th style="text-align: center">跟进人</th>
<th style="text-align: center">责任人签名</th>
<th style="text-align: center">状态</th>
<th style="text-align: center">时效</th>
<th style="text-align: center">组别</th>
<th style="text-align: center">操作</th>
</tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
</div>
var btn = document.getElementById('btn');
btn.addEventListener('click',Btn1);
function Btn1() {
$("#test tbody").append('<tr>\n' +
' <td style="text-align: center"><input type="checkbox" name=""></td>\n'+
' <td style="text-align: center">'+ showTime +'</td>\n' +
' <td style="text-align: center">'+ '<select id="select1" name="warehouse_code_priv_ta" style="height: 22px;"><option value="来货规范">来货规范</option><option value="操作规范">操作规范</option><option value="库区维护">库区维护</option><option value="产品安全">产品安全</option><option value="库存差异">库存差异</option><option value="其它">其它<input style="display: none"></option></select>' +'</td>\n' +
' <td style="text-align: center"><input style="width: 120px;height: 100%"></td>\n' +
' <td style="text-align: center"><input style="width: 120px;height: 100%"></td>\n' +
' <td style="text-align: center"><input style="width: 100%;height: 100%"></td>\n' +
' <td style="text-align: center"><input style="width: 80px;height: 100%"></td>\n' +
' <td style="text-align: center"><input style="width: 100%;height: 100%"></td>\n' +
' <td style="text-align: center"><input style="width: 50px;height: 100%"></td>\n' +
' <td style="text-align: center"><input type="date"></td>\n' +
' <td style="text-align: center"><input style="width: 70px;height: 100%"></td>\n' +
' <td style="text-align: center"><input style="width: 70px;height: 100%"></td>\n' +
' <td style="text-align: center"><input style="width: 70px;height: 100%"></td>\n' +
' <td style="text-align: center" id="td1">待确认</td>\n' +
' <td style="text-align: center">系统自动计算</td>\n' +
' <td style="text-align: center">'+'<select id="select3" name="warehouse_code_priv_ta" style="height: 22px;"><option value="入库组">入库组</option><option value="加工组">加工组</option><option value="IQC">IQC</option><option value="上架组">上架组</option><option value="库存组">库存组</option><option value="移货组">移货组</option><option value="盘点组">盘点组</option><option value="拣货组">拣货组</option><option value="打包组">打包组</option><option value="发货组">发货组</option></select>'+'</td>\n' +
' <td style="text-align: center"><button>打印</button></td>\n' +
' </tr>');
}
好了，自动生成表格数据就完成了！
然后就是要实现选中表格生成DIV的功能了。
我们点击按钮生成表格数据后需要获取表格的下标，所以我们要再次给按钮添加多一个点击事件，该事件用于获取下标。
获取所有下标后就对其进行遍历将这些一个个赋予div，详细请看下面代码中的注释
btn.addEventListener('click',B2);
function B2(){
var oUl = document.getElementById('tbody1');
var Lis = oUl.getElementsByTagName('tr');
//我们要对所有的<tr>进行遍历并且使得每一个<tr>数据都拥有一个div
for(var i = 0;i<Lis.length;i++){
Lis[i].index = i;
//console.log(this.index)
Lis[i].onclick = function(){
//alert(this.index);//0、1、2、3..
console.log(this.index)
var div = document.createElement('div');
var tr = document.createElement('tr');
div.innerHTML = '<table class="table table-bordered" style="width:100%;height: 100%"><tbody><tr><td>异常图片<input οnclick="getSC()" type="file" name="" id="uploadfile" multiple>\n' +
' <div id="ddiv1" style="overflow-y:scroll;width: 500px;height: 300px;"></div></td><td><center>问 题 点：<textarea style="margin-top:20px;width: 670px;height: 100px;vertical-align:middle"></textarea><br>问 题 分 析：<textarea style="margin-top:10px;width: 670px;height: 100px;vertical-align:middle"></textarea><br>改善结果回复：<textarea style="margin-top:10px;margin-left:20px;width: 670px;height: 100px;vertical-align:middle"></textarea></center><center><button id="btn3" style="text-align: center;margin-top: 10px;" class="btn btn-primary">保存</button><button id="btn4" style="text-align: center;margin-top: 10px;" class="btn btn-warning" disabled="disabled">保存</button></center></td>' +
'<td>改善图片<input οnclick="getSC2()" type="file" name="" id="uploadfile2" multiple>\n' +
' <div id="ddiv2" style="overflow-y:scroll;width: 500px;height: 300px;"></div></td></tr></tbody></table>'
div.style = 'width: 98%;height: 400px;margin-right: 1%;margin-left: 1%;border: 1px solid #000000;';
//我们要对<tr>进行判断它是否有div，通过id进行判断，如果它没有div就给它生成一个div并显示出来，如果有了div就直接显示div
var arr = [];
$('div').each(function () {
var id = $(this).attr('id');
arr.push(id);
})
if (arr.includes('div'+this.index)){
$('div').not('.cat'+this.index).hide();
document.getElementById('d1').style.display = 'block';
document.getElementById('ddiv1').style.display = 'block';
document.getElementById('ddiv2').style.display = 'block';
document.getElementById('div'+this.index).style.display = 'block';
}
else {
div.id = 'div'+this.index;
div.className = 'cat'+this.index;
tr.id = 'tr'+this.index;
var bo = document.body;
bo.insertBefore(div,bo.lastChild);
$('div').not('.cat'+this.index).hide();
document.getElementById('d1').style.display = 'block';
document.getElementById('div'+this.index).style.display = 'block';
document.getElementById('ddiv1').style.display = 'block';
document.getElementById('ddiv2').style.display = 'block';
// document.getElementById('tr'+this.index).style.backgroundColor ='#00FFFF';
}
var btn3 = document.getElementById('btn3')
var btn4 = document.getElementById('btn4')
btn3.onclick=function () {
if (document.getElementById('td1').innerHTML=='待确认'){
document.getElementById('td1').innerHTML='进行中';
btn3.disabled="disabled";
btn4.disabled='';
}
}
btn4.onclick=function () {
if (document.getElementById('td1').innerHTML=='进行中'){
document.getElementById('td1').innerHTML='待稽查处理';
btn4.disabled="disabled";
}
}
}
}
};
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
