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>ログイン後にコピー
ログイン後にコピー
5.setAttribute("type", " checkbox");
if (row.ISUSSELF = = '1') {
td5.setAttribute("checked", true);
}
else {
td5.setAttribute("checked", false);このように表を書くと面倒になりますが、追加してもいいでしょうか。 document.createElement('input'); から document.createElement('td');?
jqueryを導入したのですが、jqueryを使ってみてはいかがでしょうか？ 、データアセンブリテーブルのtrとtdを取得していますか？
jqueryを導入したのですが、jqueryを使ってみてはいかがでしょうか？ 、データアセンブリテーブルの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>ログイン後にコピー
ログイン後にコピー
ありがとう、良い方法です、修正してください
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
