html页面显示的问题_html/css_WEB-ITnose-HTML Tutorial-php.cn

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 = "不可用";            }

Copy after login

回复讨论(解决方案)

         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);              }

Copy after login

我现在这样完全不行啊，求赐教！

首先下面的代码就不正确，根本取不到你要的元素：

document.getElementById("checkbox").checked = true

Copy after login

<!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>

Copy after login

<!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>

Copy after login

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));      }

Copy after login

<!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>

Copy after login

<!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>

Copy after login

谢谢了，挺好的方法，修改下就可以了