當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > 可輸入內(nèi)容的表格JS代碼怎么寫(xiě)

可輸入內(nèi)容的表格JS代碼怎么寫(xiě)

2012/10/31 16:14:19作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

可輸入內(nèi)容的表格

【實(shí)例描述】

默認(rèn)的HTML表格只能輸出數(shù)據(jù)，不能進(jìn)行輸入。本例用變通的方法，實(shí)現(xiàn)一個(gè)類(lèi)似表格輸入的效果。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <title>標(biāo)題頁(yè)-學(xué)無(wú)憂(yōu)（wangbatian.cn）</title>
    <script type="text/jscript">
      str="第一行|第一行|第二行|第二行";            
//默認(rèn)單元格數(shù)據(jù)
      b=str.split("|")                              
//切割成數(shù)據(jù)數(shù)組
      for(var a in b)
      document.write ("<input type='text' value="+b[a]+">")
//動(dòng)態(tài)輸出文本框
      </script>
  </head>
<body>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例談不上什么特殊技術(shù)，只是利用“input”輸入框控件的邊框，組成了一個(gè)類(lèi)似“table”的效果。其實(shí)很多網(wǎng)站上頁(yè)面的效果，不一定按照傳統(tǒng)的思維模式去定義，變通一下也許會(huì)變得更簡(jiǎn)單，效果也看不出什么分別。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：可輸入內(nèi)容的表格 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： 表格  JS代碼