search

Home >Web Front-end >HTML Tutorial >html页面显示的问题_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-21 09:43:511194browse

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>


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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：C#中HTML页面如何与数据库交互_html/css_WEB-ITnoseNext article：HTML样式跑样_html/css_WEB-ITnose

Related articles

See more