原生js select选择后 ajax获取数据渲染table

矫情吗；* 2022-12-31 11:18 160阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./jquery-3.5.1.min.js"></script>
        <style>
            .jsbox { 
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .slt { 
                margin-left: 60px;
            }
            select { 
                width: 120px;
                height: 35px;
                font-size: 18px;
            }
            table { 
                height: auto;
                width: auto;
            }
            th { 
                width: 200px;
                background-color: beige;
            }
            td { 
                width: 200px;
                text-align: center;
                height: 35px;
            }
    
        </style>
    </head>
    <body>
        <div class="jsbox">
            <div class="slt">
                <select id='select' onchange=''>
                    <option value=''>请选择</option>
                    <option value='195'>195</option>
                    <option value='223'>233</option>
                    <option value='v1'>v1</option>
                    <option value='online'>online</option>
                </select>
            </div>
            <br/>
            <p id='descbox'></p>
            <table border="1" cellspacing="0" cellpadding="0">
                <thead id='thead'></thead>
                <tbody id='tbody'></tbody>
            </table>
        </div>
    </body>
    <script>
        $("#select").change(function(){ 
            let table = document.getElementsByTagName("table");
            let thead = document.getElementById("thead");
            let tbody = document.getElementById("tbody");
            $('#tbody').empty()
            $.ajax({ 
                type: "post",
                url: '/common/check',  
                async: false,	
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify({ 
                    env: $(this).val()
                }),
                success: function(res) { 
                    let tableData = res.data.job
                    let tableDataArr = tableData[0];
                    let str = "";
                    let _str = "";
                    str += `<tr>`;
                    str += `<th class="title">res</th>`;
                    str += `<th class="title">code</th>`;
                    for (let key in tableData[0].checkResult) {  
                        str += `<th class="title">${ key}</th>`;
                    }
                    str += `</th>`;
                    thead.innerHTML = str;
                    for (let i = 0; i < tableData.length; i++) { 
                        let obj = tableData[i].checkResult;
                        _str += `<tr class="titleTr">`;
                        _str += `<td class="title1">${ tableData[i].res}</td>`;
                        _str += `<td class="title1">${ tableData[i].code}</td>`;
                        for (let k in obj) { 
                            if(k === 'md5Result') { 
                                _str += `<td class="title1"><p>${ Object.keys(obj[k])} ： ${ obj[k][Object.keys(obj[k])]}</p></td>`;
                            } else { 
                                _str += `<td class="title1">${ obj[k]}</td>`; 
                            } 
                        }
                        _str += `</tr>`;
                    }
                    tbody.innerHTML += _str; 
                },
                error: function (data) { 
                    let descbox = document.getElementById("descbox");
                }
            });
        });
        
    </script>
    </html>

两三年没写原生… 这个需求真的搞懵了，样式没有要求我就随便写了，要求速度快就写的比较乱

react万岁

ajax跨域忘了怎么搞，渲染用的本地数据

let res = { 
    	"code": 0,
    	"data": { 
    		"job": [
    			{ 
    				"res": " 18634 Mon Dec 28 10:42:02 2020 1-01:03:23 java -jar job.jar --serverno=1 --loghome=/data/tmp/logs/argus/job/job_1/\n",
    				"code": 0,
    				"checkResult": { 
    					"serviceName": "job",
    					"serviceIp": "192.168.10.233",
    					"baseIp": null,
    					"checkCmd": "ps -eo pid,lstart,etime,cmd|grep job.jar|grep -v grep",
    					"pid": 18634,
    					"runCmd": "java -jar job.jar --serverno=1 --loghome=/data/tmp/logs/argus/job/job_1/",
    					"survived": true,
    					"startTime": "Mon Dec 28 10:42:02 2020",
    					"runtTime": "1-01:03:23",
    					"md5Result": { 
    						"/data/projects/job.jar": "93b94d95cd635a357311f512f6b7fde0"
    					}
    				}
    			},
    			{ 
    				"res": " 20953 Thu Dec 10 17:54:43 2020 18-17:52:55 java -jar job.jar --serverno=1\n",
    				"code": 0,
    				"checkResult": { 
    					"serviceName": "job",
    					"serviceIp": "192.168.10.195",
    					"baseIp": null,
    					"checkCmd": "ps -eo pid,lstart,etime,cmd|grep job.jar|grep -v grep",
    					"pid": 20953,
    					"runCmd": "java -jar job.jar --serverno=1",
    					"survived": true,
    					"startTime": "Thu Dec 10 17:54:43 2020",
    					"runtTime": "18-17:52:55",
    					"md5Result": { 
    						"/data/projects/job.jar": "20835f3cb545e8c46798e5979eb3c060"
    					}
    				}
    			}
    		]
    	},
    	"desc": "done"
    }