JavaScript7-2 动态删除表格行

实例：动态删除表格的行

实例分析：

1）用for循环在每一行最后最个节点添加(oTable.rows[i].insert(5))一个节点delete。

2）每个delete的节点.onclick = myDelete。

3）myDelete的函数中，this.parentNode 来找到父节点然后用removeChild(子节点)删除节点。

<html>
<head>
<title>Insert title here</title>
<style type ="text/css">
body{
    background-color:#ebf5ff;
    margin:0px;padding:4px;
    text-align:center;
    border-collapse:collapse;
}
.datalist{
    border:1px solid #0058a3;
    color:#0046a6;
    background-color:#d2e8ff;
    font-family:Arial;
}
.datalist caption{
    font:bold 1.4em;
    font-size:18px;
    padding-bottom:5px;
}
.datalist th{
    font-weight:bold;
    border:1px solid#0058a3;
    text-align:center;
    padding-right:5px;padding-left:5px;
    padding-top:12px;padding-bottom:12px;
    color:#FFFFFF;
    background-color:#4bacff;
}
.datalist td{
    border:1px solid #0058a3;
    text-align:left;
    padding-right:4px; padding-left:4px;
    padding-top:10px; padding-bottom:10px;
}
</style>
<script language = "javascript">
window.onload = function(){
    var oTable = document.getElementById("member");
    for(var i=0; i<oTable.rows.length; i++){
    var oTd = oTable.rows[i].insertCell(5);
    oTd.innerHTML = "<a href='#'>delete</a>";
    oTd.onclick = myDelete;    //Ìí¼ÓÉ¾³ýÊÂ¼þ
    }
}
function myDelete(){
    var oTable = document.getElementById("member");
    alert(this.parentNode.parentNode.nodeName);   this.parentNode.parentNode.removeChild(this.parentNode);
}
</script>
</head>
<body>
<table class = "datalist" summary = "This table shows the yearly income for years 2005 througth2008"border = "1" id = "member">
<caption>财政报表2005-2008</caption>
<tbody>
<tr>
   <th></th>
   <th scope = "col">2005</th>
   <th scope = "col">2006</th>
   <th scope = "col">2007</th>
   <th scope = "col">2008</th>
</tr>
<tr>
   <th scope = "row">拨款</th>
   <td>11,980</td>
   <td>12,650</td>
   <td>9,700</td>
   <td>10,600</td>
</tr>
<tr>
   <th scope = "row">捐款</th>
   <td>4,780</td>
   <td>4,989</td>
   <td>6,700</td>
   <td>6,590</td>
</tr>
<tr>
   <th scope = "row">投资</th>
   <td>8,000</td>
   <td>8,100</td>
   <td>8,760</td>
   <td>8,490</td>
</tr>
<tr>
   <th scope = "row">募捐</th>
   <td>11,980</td>
   <td>12,650</td>
   <td>9,700</td>
   <td>10,600</td>
</tr>
<tr>
   <th scope = "row">销售</th>
   <td>28,980</td>
   <td>27,650</td>
   <td>27,700</td>
   <td>29,600</td>
</tr>
<tr>
   <th scope = "row">杂费</th>
   <td>2,980</td>
   <td>1,650</td>
   <td>1,300</td>
   <td>1,760</td>
</tr>
<tr>
   <th scope = "row">总计</th>
   <td>58,460</td>
   <td>57,859</td>
   <td>58,110</td>
   <td>60,700</td>
</tr>
</tbody>
</table>
</body>
</html>

7.3 控制表单

表单<form> 是与用户交互最频的元素之一。它通过各种形式接受用户的数据。包括下拉列表框、单选按钮、复选框和文本框

在编写表单时应尽量用到<label>标记来提高用户的体验，并且每个表单都应该分配name和id属性。name用来将数据提交给服务器，id用于label的绑定。点击单选框的文字checkbox就focus了。如鼠标靠近睡觉，旁边的单选框就聚焦，点击文字，就相当于点击单选框。

7.3.3 访问表单中的元素

每个表单中的元素，无论是文本框、单选按钮、下拉列表框或者其他的内容，都包含在form的elements 集合中。可以利用元素在集合中的位置或者元素的那么的属性来获得该元素的引用。

var oForm = document.forms["myForm1"];

var oTextName = oForm.elements[0];

var oTextPassword = oForm.elements["passwd"]; //获取name 属性为passwd的元素。

还有一种使用频率最高也是最直观的方法，即直接通过元素的name属性来访问。

var oText = oForm.elements.comments;//获取 name 属性为 comments的元素。

7.3.4 公共属性与方法

7.3.5 提交表单

Web 用户提交表单时往往会2网速过慢而反复单击提交按钮，对于服务器而言是很大的负担，通常可以使用disabled属性来禁止这种行为，例如：

7.4 设置文本框

7.4.1 控制用户输入字符个数

多行文本框<textarea>没有maxlength属性限制用户输入的字符数，可以定义类似的属性，并对onkeypress事件做相应的处理，例如：

function LseeThan(oTextArea){

return oTextArea.value.length < oTextArea.getAttrubute("maxlenth");

}

7.4.2 设置鼠标经过时自动选择文本

<p><label for = "name">请输入您的姓名：</label>

function myFocus(){

this.focus();

}

function mySelect(){

this.select();

}

window.onload = function{

var oForm = document.forms["myForm1"]；

}

</script>

来源：https://www.cnblogs.com/balaku/archive/2012/05/29/2523409.html

标签

javascript

html表格

padding