JS代碼實(shí)現(xiàn)表格按Enter鍵自動(dòng)生成新行

2012/10/30 14:04:44作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

表格按Enter鍵自動(dòng)生成新行

【實(shí)例描述】

在Excel中，可以通過按Enter鍵將光標(biāo)切換到下一行。本例將學(xué)習(xí)在HTML表格中，如何按Enter鍵自動(dòng)添加新行。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（wangbatian.cn）</title>
<script LANGUAGE="JavaScript">
function newRow()
{
   if(event.keyCode=="13")       //如果單擊的是回車鍵
   {
     var row= tbl.insertRow(1);  //添加行
         row.height="50";  //設(shè)置行高 
     var cell1=    row.insertCell(0); //添加列
     var cell2=    row.insertCell(1);  //添加列
       cell1.innerHTML="第二行"         //指定列內(nèi)容
       cell2.innerHTML="第二行第二列"
   }
}
</script>
</head>
<body>
鼠標(biāo)放到第二列，然后按回車鍵<br />
<table id="tbl" border="1"><tr><td>第一行第一列</td>
<td onkeypress="newRow()">第一行第二列</td></tr>
</table>
</body>
</html>

【運(yùn)行效果】

初始運(yùn)行效果

運(yùn)行效果

按Enter鍵后的效果

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)有兩個(gè)：動(dòng)態(tài)創(chuàng)建行和列，以及捕獲單元格的按鍵操作。創(chuàng)建行和列分別使用的是“insertRow”和“insertCell”方法。用“onkeypress”捕獲單元格的按鍵操作，“event．keyCode”表示用戶的按鍵值，其值為“13”時(shí)，表示按下的是Enter鍵。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：表格按Enter鍵自動(dòng)生成新行進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS代碼 Enter 生成新行