Heim > Artikel > Web-Frontend > html页面显示的问题_html/css_WEB-ITnose
html页面显示的问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:43:511159Durchsuche
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> var td5= document.createElement('input');
td5.setAttribute("type", "checkbox");
if (row.ISUSSELF == '1') {
td5.setAttribute("checked", true);
}
else {
td5.setAttribute("checked", false);
}
这样写表格就乱了，能把document.createElement('input');加入到document.createElement('td');里吗？
你都引入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> 谢谢了 ，挺好的方法，修改下就可以了
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：C#中HTML页面如何与数据库交互_html/css_WEB-ITnoseNächster Artikel：HTML样式跑样_html/css_WEB-ITnose