検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML ページの表示_html/css_WEB-ITnose に関する問題

HTML ページの表示_html/css_WEB-ITnose に関する問題

WBOY
WBOYオリジナル
2016-06-21 09:43:511193ブラウズ

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>

ありがとう、良い方法です、修正してください

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：C#_html/css_WEB-ITnose でデータベースを操作する方法次の記事：C#_html/css_WEB-ITnose でデータベースを操作する方法

関連記事

続きを見る