之前那个手动翻页的表格实在是太丑,因此我们这次考虑使用能直接一拉到底的表格:
<div style="auto;overflow:auto; height:310px;"> <table id="demo" class="layui-table"></table> </div>
其中style的overflow属性即是控制表格滑动条的
图表联动我们还是通过函数实现:
function search(){ var tab= document.getElementById("demo"); for( var i=0;i<tab.rows.length;){ tab.deleteRow(0); } var country = document.getElementById('country').value; var date = document.getElementById('date').value; var type = document.getElementById('type').value; var doit = document.getElementById('doit').value; var amount = document.getElementById('amount').value; for(var i = 0;i<alldata.length&&i<3680; i++){ switch(type){ case 'Confirm': if(doit !='most'){ if(amount==''){amount="2147483640";} if(alldata[i].name.includes(country)&&alldata[i].date.includes(date)&&alldata[i].Confirm<=amount) {dogo(alldata[i].name,alldata[i].date,alldata[i].NowConfirm,alldata[i].ConfirmAdd,alldata[i].Confirm);} }else{ if(amount==''){amount="0";} if(alldata[i].name.includes(country)&&alldata[i].date.includes(date)&&alldata[i].Confirm>=amount) {dogo(alldata[i].name,alldata[i].date,alldata[i].NowConfirm,alldata[i].ConfirmAdd,alldata[i].Confirm);} } break; case 'NowConfirm': if(doit !='most'){ if(amount==''){amount="2147483640";} if(alldata[i].name.includes(country)&&alldata[i].date.includes(date)&&alldata[i].NowConfirm<=amount) {dogo(alldata[i].name,alldata[i].date,alldata[i].NowConfirm,alldata[i].ConfirmAdd,alldata[i].Confirm);} }else{ if(amount==''){amount="0";} if(alldata[i].name.includes(country)&&alldata[i].date.includes(date)&&alldata[i].NowConfirm>=amount) {dogo(alldata[i].name,alldata[i].date,alldata[i].NowConfirm,alldata[i].ConfirmAdd,alldata[i].Confirm);} } break; case 'ConfirmAdd': if(doit !='most'){ if(amount==''){amount="2147483640";} if(alldata[i].name.includes(country)&&alldata[i].date.includes(date)&&alldata[i].ConfirmAdd<=amount) {dogo(alldata[i].name,alldata[i].date,alldata[i].NowConfirm,alldata[i].ConfirmAdd,alldata[i].Confirm);} }else{ if(amount==''){amount="0";} if(alldata[i].name.includes(country)&&alldata[i].date.includes(date)&&alldata[i].ConfirmAdd>=amount) {dogo(alldata[i].name,alldata[i].date,alldata[i].NowConfirm,alldata[i].ConfirmAdd,alldata[i].Confirm);} } break; } } console.log(country); console.log(date); console.log(type); console.log(doit); console.log(amount); }
这样我们就实现了图表联动(就是按条件筛选数组元素)