这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
如下图所示:
javascript 对 talbe 进行动态添加、删除、验证实现代码,需要的朋友可以参考下
源代码如下:
- <!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>
- <title>
- </title>
- <script type="text/javascript">
- //进行数据验证
- function ValidateForm() {
- var booknamelist = document.getElementsByName("BookName");
- var bookversionlist = document.getElementsByName("Version");
- var booknumlist = document.getElementsByName("BookNum");
- for (var i = 0; i < booknamelist.length; i++) {
- var bookname = booknamelist[i].value;
- var bookversion = bookversionlist[i].value;
- var booknum = booknumlist[i].value;
- if (bookname == "") {
- alert("第" + (i + 1) + "行的图书名称不能为空!");
- return false;
- }
- if (bookversion == "") {
- alert("第" + (i + 1) + "行的图书版本不能为空!");
- return false;
- }
- if (booknum == "") {
- alert("第" + (i + 1) + "行的图书数量不能为空!");
- return false;
- }
- if (isNaN(booknum)) {
- alert("第" + (i + 1) + "行的图书数量输入的不正确!");
- return false;
- }
- }
- return true;
- }
- var rowNum = 2;
- //添加一行
- function AddRow() {
- var myTable = document.getElementByIdx_x("myTable");
- var newTr = myTable.insertRow(rowNum);
- var newTd1 = newTr.insertCell(0);
- newTd1.setAttribute("align", "center");
- newTd1.innerHTML = '<input type="text" name="BookName" style="width:200px">';
- var newTd2 = newTr.insertCell(1);
- newTd2.setAttribute("align", "center");
- newTd2.innerHTML = '<input type="text" name="Version" style="width: 120px" />';
- var newTd3 = newTr.insertCell(2);
- newTd3.setAttribute("align", "center");
- newTd3.innerHTML = '<input type="text" name="BookNum" style="width: 56px" />';
- var newTd4 = newTr.insertCell(3);
- newTd4.setAttribute("align", "center");
- newTd4.innerHTML = '<input type="text" name="BookAuthor" style="width: 70px" />';
- var newTd5 = newTr.insertCell(4);
- newTd5.setAttribute("align", "center");
- newTd5.innerHTML = '<input type="text" name="BookPress" style="width: 102px" />';
- rowNum++;
- }
- //删除最后一行
- function DeleteRow() {
- var myTable = document.getElementByIdx_x("myTable");
- if (rowNum > 1) {
- myTable.deleteRow(rowNum - 1);
- rowNum--;
- }
- }
- </script>
- </head>
- <body>
- <table id="myTable" cellspacing="0px" cellpadding="2px" width="700px">
- <tr>
- <td align="center" style="color: #006699; font-weight: bold;">
- 图书名称
- </td>
- <td align="center" style="color: #006699; font-weight: bold;">
- 版 本
- </td>
- <td align="center" style="color: #006699; font-weight: bold;">
- 数量(本)
- </td>
- <td align="center" style="color: #006699; font-weight: bold;">
- 图书作者
- </td>
- <td align="center" style="color: #006699; font-weight: bold;">
- 出版社
- </td>
- </tr>
- <tr>
- <td align="center">
- <input name="BookName" type="text" style="width: 200px" />
- </td>
- <td align="center">
- <input type="text" name="Version" style="width: 120px" />
- </td>
- <td align="center">
- <input type="text" name="BookNum" style="width: 56px" />
- </td>
- <td align="center">
- <input type="text" name="BookAuthor" style="width: 70px" />
- </td>
- <td align="center">
- <input type="text" name="BookPress" style="width: 102px" />
- </td>
- </tr>
- </table>
- <div>
- <input type="button" value="添加图书" onclick="AddRow()" />
- <input type="button" value="删除图书" onclick="DeleteRow()" />
- <input type="button" value="提交" onclick="ValidateForm()" />
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0417/282033.html