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