✍ 📁 🙈 🙉 🙊

JSON format

<pre>
以 JavaScript 物件表示一筆資料
        var obj = [ {"AA":"11", "BB":"22", "CCC":"33" },
                    {"BB":"1", "CC":"2" }];</pre>
<table border="1"width="100%" >
<tr><td>
1</td><td>
var obj </td><td>得出二個物件 <c id="D1"></c> 
</td></tr><tr><td>
2</td><td>
JSON.stringify(obj)</td><td> 得出字串化 
   <c id="D2"></c>
</td></tr><tr><td>

3</td><td>
obj.length </td><td>得出長度 <c id="D3"></c>
</td></tr><tr><td>

4</td><td>
Object.keys(obj).length </td><td>得出長度 <c id="D4"></c>
</td></tr><tr><td>

5</td><td> 
Object.keys(obj[0]).length </td><td>得出長度 <c id="D5"></c>
</td></tr><tr><td>

6</td><td> 
Object.keys(obj[1]).length </td><td>得出長度 <c id="D6"></c>
</td></tr><tr><td>

7</td><td> 
JSON.stringify(obj[0]) </td><td>得出 <c id="D7"></c>
</td></tr><tr><td>

8</td><td> 
JSON.stringify(obj[1]) </td><td>得出 <c id="D8"></c>
</td></tr><tr><td>

9</td><td> 
obj[0].AA </td><td>得出 <c id="D9"></c>
</td></tr><tr><td>

10</td><td>
obj[0].BB </td><td>得出 <c id="D10"></c>
</td></tr><tr><td>

11</td><td>
obj[1].BB </td><td>得出 <c id="D11"></c>

</td></tr></table>

D1.innerHTML= obj ;
D2.innerHTML= JSON.stringify(obj) ;
D3.innerHTML= obj.length ;
D4.innerHTML= Object.keys(obj).length ; 
D5.innerHTML= Object.keys(obj[0]).length ;
D6.innerHTML= Object.keys(obj[1]).length ;
D7.innerHTML= JSON.stringify(obj[0]) ;  
D8.innerHTML= JSON.stringify(obj[1]) ;  
D9.innerHTML= obj[0].AA ;  
D10.innerHTML= obj[0].BB ;  
D11.innerHTML= obj[1].BB ;

</script>

Edit

HTML Table

<table>標簽定義 HTML 表格。

<bb><<c>table rules=" rows/cols/all/none" ></bb><br><br>

<table rules="rows" style="width:95%" >
<caption><<c>table rules="rows" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="cols" style="width:95%" >
<caption><<c>table rules="cols" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td></tr><tr><td>

<table rules="all" style="width:95%" >
<caption><<c>table rules="all" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</td><td>

<table rules="none" style="width:95%" >
<caption><<c>table rules="none" ></caption><tbody>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 3</td></tr>
<tr><td>欄位 1</td><td>欄位 2</td><td>欄位 4</td></tr>
</tbody></table>

</rd></tr></tbody></table>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
bb{font-size:25px;color:blue;font-weight : bold;} 
b{font-size:20px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

Edit

#html #網頁格式 #script #style #html table #table caption #table th #table tr #table td #標簽定義 HTML 表格 #table border #table colspan #table rowspan #table rules

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

<pre><bb>input type="text"</bb>

<<c>input type="text" size="20" value="123456" />
<input type="text" size="20" value="123456" />
<hr>
<<c>input type="text" size="20" value="123456" <r>onclick="this.select()"</r> />
<input type="text" size="20" value="123456" onclick="this.select()"   />
<hr>
<<c>input type="text" size="20" value="123456" <r>onchange="this.select()"</r><b> onclick="this.select()"</b>  />
<input type="text" size="20" value="123456" onchange="this.select()" onclick="this.select()"  />
<hr>
<<c>input type="text" size="20" value="123456" <r>maxlength="10"</r>/>
<input type="text" size="20" value="123456" maxlength="10"/>
<hr>
<<c>input type="text" size="20" value="123456" <r>readonly</r> />
<input type="text" size="20" value="123456" readonly />
<hr>
<<c>input type="text"  size="20"  value="123456" <r>disabled</r> />
<input type="text"  size="20"  value="123456" disabled />

</pre>

<pre><bb>input  </bb>

<<c>input <r>type="password"</r> size="20" value="123456"  />
<input type="password" size="20" value="123456"  /> 
<hr>
<<c>input <r>type="number"</r> size="20"  value="123456"  />
<input type="number" size="20"  value="123456"  />
<hr>
<<c>input type="password" size="20" value="123456" <r>onmouseover="this.select()"</r> <b>onmouseout="this.blur();"</b> />
<input type="password" size="20" value="123456" onmouseover="this.select()"   onmouseout="this.blur();" />
<hr>
<<c>input type="date">
<input type="date">
<hr>
<<C>input type="month" >
<input type="month" >
<hr>
<<c>input type="datetime-local">
<input type="datetime-local">
<hr>
<<c>input type="time" >
<input type="time" >
</pre>

Edit

#html #網頁格式 #script #style #div #html input #html input text

input radio

input radio/Checkboxes 選擇框

<label class="container">
  <input type="radio" name="S1" checked >One</label><br>
<label class="container">
  <input type="radio" name="S1">Two</label><br>
<label class="container">
  <input type="radio" name="S1">Three</label><br>
<label class="container">
  <input type="radio" name="S1">Four</label><br>

<pre>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> checked>One<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Two<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Three<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" <r>name="S1"</r> >Four<<c>/label><c><br>
<<c>style>
.container { cursor: pointer;           
             font-size: 22px; }     
<<c>/style></pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

<label class="container">
  <input type="radio" checked >One</label><br>
<label class="container">
  <input type="radio" >Two</label><br>
<label class="container">
  <input type="radio" >Three</label><br>
<label class="container">
  <input type="radio" >Four</label><br>

<pre>
<<c>label class="container">
  <<c>input type="radio" checked>One<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio" >Two<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio"  >Three<<c>/label><<c>br>
<<c>label class="container">
  <<c>input type="radio"  >Four<<c>/label><c><br>
<<c>style>
.container { cursor: pointer;           
             font-size: 22px; }     
<<c>/style></pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

You select <span id="dp">?</span>
<br>

}) })
</script>
<pre>

<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => { 
    round.addEventListener("click", function() {
    if(round.value== dp.innerHTML){  
    round.checked=false ;
    dp.innerHTML = "?";return }
dp.innerHTML =  round.value ;

}) })
<</c>/script>

</pre>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

You select <span id="dp1"> 1 </span>
<span id="dp2"> 2 </span>
<span id="dp3"> 3 </span>
<span id="dp4"> 4 </span>
<br>

<<c>script>
var Tag= document.querySelectorAll("input") ;
Tag.forEach((round) => {
    round.addEventListener("click", function() { 
       var TT =document.getElementById("dp"+round.value) ;
       if(TT.style.opacity == 0.3){ TT.style.opacity=1; 
                     TT.style.textDecoration = "initial"; }
        else{ TT.style.opacity=0.3;
               round.checked=false ;
               TT.style.textDecoration = "line-through";   }
  }) })
<</c>/script>

</pre>

<style>

.container { cursor: pointer;           
             font-size: 22px;
             padding-left: 20px; } 
#dp1 ,#dp2 ,#dp3 ,#dp4 { padding-left: 20px;
                         text-decoration : LINE-THROUGH;
                         opacity:0.3}    
</style>

pre { font-size: 20px ;
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
b{font-size:30px;color:blue;} 
r{font-size:20px;color:red;} 
</style>

input radio/Checkboxes 選擇框

Edit

#html #網頁格式 #script #style #div #html input radio #html 選擇框

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

JSON format

HTML Table

<table>標簽定義 HTML 表格。

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

input radio

input radio/Checkboxes 選擇框

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

JSON format

HTML Table

<table>標簽定義 HTML 表格。

input text

HTML input text 文字輸入欄位用來讓網友輸入文字

input radio

input radio/Checkboxes 選擇框

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單