>웹 프론트엔드 >HTML 튜토리얼 >html页面显示的问题_html/css_WEB-ITnose

html页面显示的问题_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-21 09:43:511192검색

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>


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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.