function showData(row) { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = row.DEVID; var td2 = document.createElement('td'); td2.innerHTML = row.Area; var td3 = document.createElement('td'); td3.innerHTML = row.USERNAME; var td4 = document.createElement('td'); if (row.IsUsable == '1') { td4.innerHTML = "可用"; } else { td4.innerHTML = "不可用"; } var td5 = document.createElement('td'); td7.innerHTML = row.BindDate; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5);}我现在是写成这样的，但是页面显示 “可用不可用” 感觉不怎么好看，想用checkbox之类的的勾选来显示。那我这里应该怎么改呢？： var td4 = document.createElement('td'); if (row.IsUsable == '1') { td4.innerHTML = "可用"; } else { td4.innerHTML = "不可用"; }
function showData(row) { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = row.UID; var td2 = document.createElement('td'); td2.innerHTML = row.AREA; var td3 = document.createElement('td'); td3.innerHTML = row.USERNAME; var td4 = document.createElement('td'); if (row.ROLE == '1') { td4.innerHTML = "是"; } else { td4.innerHTML = "否"; } var td5 = document.createElement('checkbox'); if (row.ISUSSELF == '1') { document.getElementById("checkbox").checked = true } else { document.getElementById("checkbox").checked = false } var td6 = document.createElement('td'); td6.innerHTML = row.ISUSABLE; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5); tr.appendChild(td6);; $("#datatable > tbody").append(tr); }首先下面的代码就不正确，根本取不到你要的元素：
document.getElementById("checkbox").checked = true
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="../Res/Script/jquery-1.9.1.min.js"></script> <script type="text/javascript"> var row = {}; row.UID = "1"; row.AREA = "China"; row.USERNAME = "Li Ming"; row.ROLE = '1'; row.ISUSSELF = '1'; $(function () { showData(row); }); function showData(row) { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = row.UID; var td2 = document.createElement('td'); td2.innerHTML = row.AREA; var td3 = document.createElement('td'); td3.innerHTML = row.USERNAME; var td4 = document.createElement('td'); if (row.ROLE == '1') { td4.innerHTML = "是"; } else { td4.innerHTML = "否"; } var chkbox = document.createElement('input'); chkbox.setAttribute("type", "checkbox"); if (row.ISUSSELF == '1') { chkbox.setAttribute("checked", true); } else { chkbox.setAttribute("checked", false); } var td6 = document.createElement('td'); td6.innerHTML = row.ISUSABLE; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(chkbox); tr.appendChild(td6);; $("#datatable > tbody").append(tr); } </script></head><body> <table id="datatable"> <tbody></tbody> </table></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="../Res/Script/jquery-1.9.1.min.js"></script> <script type="text/javascript"> var row = {}; row.UID = "1"; row.AREA = "China"; row.USERNAME = "Li Ming"; row.ROLE = '1'; row.ISUSSELF = '1'; $(function () { showData(row); }); function showData(row) { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = row.UID; var td2 = document.createElement('td'); td2.innerHTML = row.AREA; var td3 = document.createElement('td'); td3.innerHTML = row.USERNAME; var td4 = document.createElement('td'); if (row.ROLE == '1') { td4.innerHTML = "是"; } else { td4.innerHTML = "否"; } var chkbox = document.createElement('input'); chkbox.setAttribute("type", "checkbox"); if (row.ISUSSELF == '1') { chkbox.setAttribute("checked", true); } else { chkbox.setAttribute("checked", false); } var td6 = document.createElement('td'); td6.innerHTML = row.ISUSABLE; tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(chkbox); tr.appendChild(td6);; $("#datatable > tbody").append(tr); } </script></head><body> <table id="datatable"> <tbody></tbody> </table></body></html>你都引入jquery了为什么不用jquery呢？，你是取会数据拼装table的tr,td吗？
你都引入jquery了为什么不用jquery呢？，你是取会数据拼装table的tr,td吗？
是啊，但是不是很会用
function showData(row) { var str=''; str+='<tr><td>'+row.UID+'</td><td>'+row.AREA+'</td><td>'+ row.USERNAME+'</td><td>'; str+=(row.ROLE == '1')?'是':'否'; str+='<input type="checkbox" '; if(row.ISUSSELF == '1') str+='checked="checked" '; str+='/></td><td>'+row.ISUSABLE;+'</td></tr>'; $("#datatable > tbody").append($(str)); }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><title>无标题文档</title></head><body> <table id="datatable"> <tbody></tbody> </table><script type="text/javascript">jQuery(function($){ var row = {}; row.UID = "1"; row.AREA = "China"; row.USERNAME = "Li Ming"; row.ROLE = '1'; row.ISUSSELF = '1'; //showData(row); //function showData(row) { var str=''; str+='<tr><td>'+row.UID+'</td><td>'+row.AREA+'</td><td>'+ row.USERNAME+'</td><td>'; str+=(row.ROLE == '1')?'是':'否'; str+='<input type="checkbox" '; if(row.ISUSSELF == '1') str+='checked="checked" '; str+='/></td><td>'+row.ISUSSELF+'</td></tr>'; $("#datatable > tbody").append($(str)); //} });</script></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><title>无标题文档</title></head><body> <table id="datatable"> <tbody></tbody> </table><script type="text/javascript">jQuery(function($){ var row = {}; row.UID = "1"; row.AREA = "China"; row.USERNAME = "Li Ming"; row.ROLE = '1'; row.ISUSSELF = '1'; //showData(row); //function showData(row) { var str=''; str+='<tr><td>'+row.UID+'</td><td>'+row.AREA+'</td><td>'+ row.USERNAME+'</td><td>'; str+=(row.ROLE == '1')?'是':'否'; str+='<input type="checkbox" '; if(row.ISUSSELF == '1') str+='checked="checked" '; str+='/></td><td>'+row.ISUSSELF+'</td></tr>'; $("#datatable > tbody").append($(str)); //} });</script></body></html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
