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代码

g2 
    <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;}

 

posted @ 2012-02-26 16:37  Ghost Soar  阅读(178)  评论(0编辑  收藏