Javascript学习历程之表格与表单

/*针对表格常用的DOM操作
针对<table>元素
caption
tBodies
tFoot
tHead
rows
deleteRow(position)
insertRow(position)
creatCaption()
deleteCaption()
针对<tbody>元素
rows
deleteCell(position)
insertCell(position)
针对<tr>元素
cells
deleteCell(position)
insertCell(position)
*/

/*添加行（g1）在第i行插入一行insertRow(i);
              单元格插入新数据insertCell(i);
              修改单元格rows[i].cells[j]定位;
              删除第i行方法一：deleteRow(i); 方法二：this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
              删除单元格oTable.rows[i].deleteCell(j)
              删除列，变相构造函数，通过循环删除单元格达到删除列 deleteColumn(oTable, iNum)
*/

js代码

window.onload = function () {var row = document.getElementById("addrow");    row.onclick = addRow; //增加行    var cell = document.getElementById("updatecell");    cell.onclick = updateCell; //修改单元格    var deltRow = document.getElementById("deleterow");    deltRow.onclick = deltrow; //删除行    var deltCell = document.getElementById("deletecell");    deltCell.onclick = deltcell; //删除单元格    var oTable = document.getElementById("member");var oTd;//动态添加delete连接    for (var i = 0; i < oTable.rows.length; i++) {if (i == 0) {            oTd = oTable.rows[i].insertCell(6);            oTd.innerHTML = "删除";        }else {            oTd = oTable.rows[i].insertCell(6);            oTd.innerHTML = "<a href='#'>delete</a>";            oTd.firstChild.onclick = myDelete; //删除行        }    }

    deleteColumn(oTable, 2);//删除列}function addRow() {var oTr = document.getElementById("member").insertRow(2);var aText = new Array();    aText[0] = document.createTextNode("4");    aText[1] = document.createTextNode("苏国强");    aText[2] = document.createTextNode("男");    aText[3] = document.createTextNode("60");    aText[4] = document.createTextNode("61");    aText[5] = document.createTextNode("62");for (var i = 0; i < aText.length; i++) {var otd = oTr.insertCell(i);        otd.appendChild(aText[i]);    }}function updateCell() {var oTable = document.getElementById("member");    oTable.rows[2].cells[2].innerHTML = "女";}function deltrow() {var oTable = document.getElementById("member");    oTable.deleteRow(oTable,2);}function deltcell() {var oTable = document.getElementById("member");    oTable.rows[2].deleteCell(4);}function myDelete() {var oTable = document.getElementById("member");this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}function deleteColumn(oTable, iNum) {for (var i = 0; i < oTable.rows.length; i++) {        oTable.rows[i].deleteCell(iNum);    }}

html代码

    <table class="datalist" summary="xx" id="member"><caption>成绩表</caption><tr><th scope="col">学号</th><th scope="col">姓名</th><th scope="col">性别</th><th scope="col">高数</th><th scope="col">英语</th><th scope="col">计算机</th></tr><tr><td>1</td><td>盖茨</td><td>男</td><td>88</td><td>93</td><td>93</td></tr><tr><td>2</td><td>乔布斯</td><td>男</td><td>82</td><td>83</td><td>84</td></tr><tr><td>3</td><td>马克</td><td>男</td><td>82</td><td>91</td><td>96</td></tr></table><input type="button" id="addrow" value="增加行"/><input type="button" id="updatecell" value="修改单元格"/><input type="button" id="deleterow" value="删除行"/><input type="button" id="deletecell" value="删除单元格"/>

/*表单公共属性和方法
checked
defaultChecked
value
defaultValue
form
name
type
blur()
focus()
click()
select()
*/

控制表单（g2）

js代码

window.onload = function () {//myform1    var oTxtPress = document.getElementById("comments");    oTxtPress.onkeypress = LessThan; //限制输入字符的个数    //myForm2 设置鼠标单击时自动选择文本    var oForm = document.forms["myForm2"];    oForm.name.onclick = myFocus;    oForm.name.onfocus = mySelect;//myForm3 设置单选按钮    var btn1 = document.getElementById("btn1");    btn1.onclick = getChoise;var btn2 = document.getElementById("btn2");    btn2.onclick = setChoise;//myForm4 设置复选框（全选，全不选，反选）    //    var oForm4 = document.forms["myForm4"];    //    var btnMyForm4 = oForm4.phone;    //    alert(btnMyForm4.type);    //    for (var i = 0; i < btnMyForm4.length; i++)    //        btnMyForm4[i].onclick = changeBoxes;    var btn3 = document.getElementById("btn3");    btn3.onclick = changeBoxes;var btn4 = document.getElementById("btn4");    btn4.onclick = changeBoxes;var btn5 = document.getElementById("btn5");    btn5.onclick = changeBoxes;

//myForm5 设置下拉菜单    var btn6 = document.getElementById("btn6");    btn6.onclick = checkSelect;var btn7 = document.getElementById("btn7");    btn7.onclick = checkSelect;//添加option    var btn8 = document.getElementById("btn8");    btn8.onclick = addOption;var btn81 = document.getElementById("btn8-1");    btn81.onclick = addOptionBefore;//替换option    var btn9 = document.getElementById("btn9");    btn9.onclick = replaceOption;//删除option    var btn_delete = document.getElementById("delete");    btn_delete.onclick = deleteOption;}function LessThan(event) {return event.srcElement.value.length < event.srcElement.getAttribute("maxlength");}function myFocus() {this.focus();}function mySelect() {this.select();}function getChoise() {var oForm = document.forms["myForm3"];var aChoise = oForm.phone;var i;for (i = 0; i < aChoise.length; i++) {if (aChoise[i].checked)break;    }    alert("您选中的手机是" + aChoise[i].value);}function setChoise() {var oForm = document.forms["myForm3"];    oForm.phone[1].checked = true;}function changeBoxes(event) {var value = event.srcElement.value;var action;switch (value) {case "全选": action = 1; break;case "全不选": action = 0; break;case "反选": action = -1; break;    }var oForm = document.forms["myForm4"];var oCheckBox = oForm.phone;for (var i = 0; i < oCheckBox.length; i++) {if (action < 0)            oCheckBox[i].checked = !oCheckBox[i].checked;else            oCheckBox[i].checked = action;    }}function checkSelect(event) {var oForm = document.forms["myForm5"];var name;if (event.srcElement.id == "btn6")        name = "phone";if (event.srcElement.id == "btn7")        name = "phone2";var oSelectBox = oForm.elements[name];var aChoise = new Array();if (oSelectBox.type == "select-one") {var iChoise  = oSelectBox.selectedIndex;        aChoise.push(oSelectBox.options[iChoise].text);        alert("您选中了：" + aChoise.join());    }else {for (var i = 0; i < oSelectBox.options.length; i++)if (oSelectBox.options[i].selected)                aChoise.push(oSelectBox.options[i].text);        alert("您选中了：" + aChoise.join());    }}function addOption() {var oForm = document.forms["myForm5"];var oBox = oForm.elements["phone3"];var oAddOption = oForm.elements["addoption"];var addOption = oAddOption.value;if (addOption == "")        alert("替换选项的内容不能为空");else {var oOption = new Option(addOption, addOption);        oBox.options[oBox.options.length] = oOption;    }}function addOptionBefore() {var oForm = document.forms["myForm5"];var oBox = oForm.elements["phone3"];var iChoise = oBox.selectedIndex; //替换option的位置    var oAddOption = oForm.elements["addoption"];var addOption = oAddOption.value;if (addOption == "")        alert("替换选项的内容不能为空");else if (iChoise < 0) {        alert("请选择被替换的选项");    }else {var oOption = new Option(addOption, addOption);        oBox.insertBefore(oOption, oBox.options[iChoise]);    }}function replaceOption() {var oForm = document.forms["myForm5"];var oBox = oForm.elements["phone3"];var iChoise = oBox.selectedIndex; //替换option的位置    var oReplaceOtion = oForm.elements["replaceoption"];var replaceoption = oReplaceOtion.value; //替换option的值    if (iChoise < 0)        alert("请选择被替换的选项");else if (replaceoption == "")        alert("替换选项的内容不能为空");else {var oOption = new Option(replaceoption, replaceoption);        oBox.options[iChoise] = oOption; //替换option    }}function deleteOption() {var oForm = document.forms["myForm5"];var oBox = oForm.elements["phone3"];if (iChoise < 0)        alert("删除选项不能为空");else {var iChoise = oBox.selectedIndex;        oBox.options[iChoise] = null;    }}

html代码

    <fieldset><legend>限制输入字符的个数</legend><form method="post" name="myForm1" action=""><p><label for="comments">控制用户输入字符的个数:</label><br><textarea name="comments" id="comments" cols="40" rows="4" maxlength="50"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"><input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p></form></fieldset>

<fieldset><legend>设置鼠标单击时自动选择文本</legend><form name="myForm2" action=""><p><label for="name">设置鼠标单击时自动选择文本:</label><input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"></p></form></fieldset>

<fieldset><legend>设置单选按钮</legend><form name="myForm3" action=""><p><input type="radio" name="phone" id="iPhone" value="iPhone" /><label for="iPhone">iPhone</label></p><p><input type="radio" name="phone" id="Lumia800" value="Lumia800" /><label for="Lumia800">Lumia800</label></p><p><input type="radio" name="phone" id="htc" value="htc" /><label for="htc">htc</label></p><p><input type="button" value="检测选中的对象" id="btn1" /><input type="button" value="设置为Lumia800" id="btn2"/></p></form></fieldset>

<fieldset><legend>设置复选框</legend><form name="myForm4" action=""><p><input type="checkbox" name="phone" id="iPhone-checkbox"  value="iPhone"/><label for="iPhone">iPhone</label></p><p><input type="checkbox" name="phone" id="Lumia800-checkbox"  value="Lumia800"/><label for="Lumia800-checkbox">Lumia800</label></p><p><input type="checkbox" name="phone" id="htc-checkbox"  value="htc"/><label for="htc-checkbox">htc</label></p><input type="button" id="btn3" value="全选" /><input type="button" id="btn4" value="全不选" /><input type="button" id="btn5" value="反选" /></form></fieldset>

<fieldset><legend>设置下拉菜单</legend><form name="myForm5" action=""><select id="phone" name="phone" ><option value="iPhone">iPhone</option><option value="Lunia800">Lumia800</option><option value="htc">htc</option></select><input type="button" id="btn6" value="查看选项" /><p></p><select id="phone2" name="phone2" multiple="multiple" ><option value="iPhone">iPhone</option><option value="Lunia800">Lumia800</option><option value="htc">htc</option></select><input type="button" id="btn7" value="查看选项" /><p></p><select id="phone3" name="phone3" multiple="multiple" ><option value="iPhone">iPhone</option><option value="Lunia800">Lumia800</option><option value="htc">htc</option></select><br /><input type="button" id="delete" value="删除选项" /><fieldset><legend>添加</legend><label for="addoption">添加内容</label><input type="text" id="addoption" name="addoption" /><input type="button" id="btn8" value="添加" /><input type="button" id="btn8-1" value="选项前添加" /></fieldset><fieldset><legend>替换</legend><label for="replaceoption">替换内容</label><input type="text" id="replaceoption" name="replaceoption" /><input type="button" id="btn9" value="替换" /></fieldset></form></fieldset>

仿百度,Google输入框搜索提示

window.onload = function () {var oTxtBox = document.getElementById("project");    oTxtBox.onkeyup = findProject;}var oInputField;var oPopDiv;var oProjectUl;var aProject = ["计算机科学与技术","计算与数学","语言文学","语文","英语"];aProject.sort();function initVars() {    oInputField = document.forms["txtWarn"].project;    oPopDiv = document.getElementById("popup");    oProjectUl = document.getElementById("project_ul");}function clearProject() {    清空提示内容for (var i = oProjectUl.childNodes.length - 1; i >= 0; i--) {        oProjectUl.removeChild(oProjectUl.childNodes[i]);    }    oPopDiv.className = "hide";}function setProjects(the_project) {    clearProject(); //每次输入先清空    oPopDiv.className = "show";var oLi;for (var i = 0; i < the_project.length; i++) {        将匹配的结果逐一匹配显示给客户        oLi = document.createElement("li");        oProjectUl.appendChild(oLi);        oLi.appendChild(document.createTextNode(the_project[i]));

        oLi.onmouseover = function () {this.className = "mouseover";        }        oLi.onmouseout = function () {this.className = "mouseout";        }        oLi.onclick = function () {            用户单击匹配选项时，输入框为该项值            oInputField.value = this.firstChild.nodeValue;            clearProject();        }    }}function findProject() {    initVars();if (oInputField.value.length > 0) {var aResult = new Array();        逐一查找匹配的选项for (var i = 0; i < aProject.length; i++) {if (aProject[i].indexOf(oInputField.value) == 0)                aResult.push(aProject[i]);        }if (aResult.length > 0)//显示匹配结果            setProjects(aResult);else//否则清除，用户多输入一个字母            clearProject(); //就有可能从有匹配到无，到无的时候需要清除    }else        clearProject();//无输入时清空提示框}

html代码

    <form method="post" name="txtWarn" action=""><label for="">科目</label><input type="text" id="project" /></form><div id="popup"><ul id="project_ul"></ul></div>

以上所有例子共用一个css

css

body {}fieldset{    margin:10px;    border:1px solid #56e178;}legend{ color:#FF0000; font-weight:bold;}    

.datalist{    border:1px solid #0058a3;/* 表格边框 */    font-family:Arial;    border-collapse:collapse;/* 边框重叠 */    background-color:#eaf5ff;/* 表格背景色 */    font-size:14px;}.datalist caption{    padding-bottom:5px;    font:bold 1.4em;    text-align:left;}.datalist th{    border:1px solid #0058a3;/* 行名称边框 */    background-color:#4bacff;/* 行名称背景色 */    color:#FFFFFF;/* 行名称颜色 */    font-weight:bold;    padding-top:4px; padding-bottom:4px;    padding-left:12px; padding-right:12px;    text-align:center;}.datalist td{    border:1px solid #0058a3;/* 单元格边框 */    text-align:left;    padding-top:4px; padding-bottom:4px;    padding-left:10px; padding-right:10px;}.datalist tr:hover, .datalist tr.altrow{    background-color:#c4e4ff;/* 动态变色 */}  

/*g2*/form{    padding:0px;    margin:0px;    font:14px Arial;}input.txt{/* 文本框单独设置 */    border: 1px inset #00008B;    background-color: #ADD8E6;}input.btn{/* 按钮单独设置 */    color: #00008B;    background-color: #ADD8E6;    border: 1px outset #00008B;    padding: 1px 2px 1px 2px;}

/*g3*/#popup{ position:absolute; width:151px; color:#004a7e; font-size:12px; font-family:Arial; left:36px; top:28px;}#popup.hide{ border:none;}#popup.show{ border:1px solid #004a7e;}ul{ list-style:none; margin:0px; padding:0px;}li.mouseover{ background:#004a7e; color:#FFFFFF;}li.mouseout{ background:#FFFFFF; color:#004a7e;}

转载于:https://www.cnblogs.com/suguoqiang/archive/2012/02/26/2368791.html

Javascript学习历程之表格与表单相关推荐

WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...
用HTML制作表单表格能学到什么,Html学习之十七（表格与表单学习--排行版制作）...
表格与表单01 table{ width: 300px; height: 40px; margin: 100px auto; border-collapse: collapse; } .th2{ fl ...
学习前端——表格、表单
学习前端--表格.表单表格在日常生活中使用的非常的多,比好excel就是专门用来创建表格的工具, 表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单在网页中也可以来创建出不同的表格. ...
前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础文章目录前端学习第一周-HTML基础前言 DAY 1 计算机组成计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...
easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单
<HTML5从入门到精通> ◎千锋教育高教产品研发部/编著 (清华大学出版社出版) 目录第3章 HTML表格与表单................................... ...
WEB入门二表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作入门视频课:H5和JAVASCRIPT实战教程能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的 ...
初识HTML（三）表格、表单
文章目录 HTML表格表格规范单元格合并 HTML表单表单控件 input标签的一些通用属性前言: 本章节将了解到HTML里较为重要的标签:表格与表单.说到表格,在早期时候的网页甚至整个页面都 ...
表格和表单的结合示例
表格和表单的结合示例demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
前端之表格，表单，列表
## 本资源由 itjc8.com 收集 --- typora-copy-images-to: media --- > 第01阶段.前端基础.表格 # HTML 第二天目标能够利用表格.列表和 ...

Javascript学习历程之表格与表单

Javascript学习历程之表格与表单相关推荐

最新文章

热门文章