javascript:
1)动态添加的思路:(3种情况)
一般情况:
a) 获取要操作的值;
1.传参;
2.document.getElementById();
b) 创建对象;
1)createElement();
b.1对象添加属性;
1.添加属性: r.g:element_name.type...
2.添加监听: element_name.οnclick=function (){
"要调用的方法名"();
}
注意:不可以element_name.οnclick="fucntion_name()";没作用;
c) 增加,删除,修改;
增,改:appendChild(),insertChild(),replaceChild();
删除:node.removeChild(deleteNode);注意:node一定要找对,deleteNode一定要判断清楚,对HTMLtextElement要清楚;
1）删除指定节点:
1.传参this: element.removeChild(this.(对应要删除的节点)Node);直接找它的父节点;
2.传参不是this,是要删除的id 或 value 或 name;通过遍历它父节点.childNodes[].id(value,name)匹配入参;这样childNodes[]中有text节点注意;
for(var i=tb.childNodes.length-1;i>=1;i--){
if(tb.childNodes[i].id(value,name)==obj(传入参)){
tb.removeChild(tb.childNodes[i]);
}
}
2种方法,1更好,2用在value删除更好
2）全删:
2.1 for(var i=tb.childNodes.length-1;i>=1;i--){
tb.removeChild(tb.childNodes[i]);
}
2.2 tb.innertHTML="";
2.3 tb.length=0;
<html>
<script>
//table添加的一般方法;
function f_add(){
//1.获值;
var name = document.getElementById("name").value;
var salary = document.getElementById("salary").value;
//2.创建;
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
//2.1.添加属性;
td1.innerHTML=name;
td2.innerHTML=salary;
var bn = document.createElement("input");
bn.type="button";
bn.value="delete";
bn.οnclick=function (){
f_delete(this);
};
td3.appendChild(bn);
//增,删,改;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
var tb = document.getElementById("tb");
tb.appendChild(tr);
}
//删除 注意:一定要记得找对父节点;要删除的节点也一定要对应好;
function f_delete(obj){
var tb = document.getElementById("tb");
tb.removeChild(obj.parentNode.parentNode);
}
</script>
<body>
<table id= "table" border = 1 align = "center" cellpadding = "5px" width = "60%" >
<thead>
<tr>
<td>name</td>
<td>salary</td>
</tr>
</thead>
<tbody id= "tb">
<tr>
<td>jack</td>
<td>1000</td>
<td><input type="button" value="delete" οnclick="f_delete(this)"/></td>
</tr>
</tbody>
</table>
<form>
name:<input type="text" id="name"/>
salary:<input type="text" id="salary"/>
<input type="button" value="add" οnclick="f_add()">
</form>
</body>
</html>table情况:
a) 获取要操作的值;
1.传参;
2.document.getElementById();
b) table的增,删,改:(其实table也可以用一般情况的方法,不过麻烦,直接使用table的封装方法,效率更高,省略了创建,增删改过程--使用一般方法时:增删改要通过tbody操作,同时也要注意 tbody没写时的隐藏)
table_name.insertRow(index)返回插入行的行对象(TableRow) TableRow.inserCell(index)返回插入列列 对象(TableCell);
table_name.deleteRow(index)删除指定行;TableRow.deleteCell(index)删除指定行中的列;
Table对象:
table的属性:
rows:所有行数组; 包括thead tfoot tbody;
tBodies:返回tbody数组;
tFoot:返回tfoot数组;
tHead:返回thead数组;
注意:tBodies,tFoot,tHead只能查询一开始就有的,后面动态添加的查不到; 表格增删改 一定要注意table.chilldNodes只有thead tbody tfoot ,thead tbody tfoot的childNodes才查 询到tr
table的方法:
insertRow(index):index 0 开始: 在表格中index插入新行,且返回这行对象TableRow;--insertRow(table.Rows.length)--
deleteRow(index):从表格中删除指定位置的行;
TableRow对象:
TableRow属性:
cells:返回行中所有单元格的数组;
rowIndex:返回行在表格中的位置;
TableRow方法:
insertCell(index) 0 开始:在指定位置插入新的单元格,且返回列对象(TableCell);--insertCell(tableRow.cell.length)--
deleteCell(index):删除指定位置的单元格;
<html>
<script>
/*table添加的table属性方法;
优点:1)将创建过程封装(规范,省略了不必要的);
*/
function f_add(){
//1.获值;
var name = document.getElementById("name").value;
var salary = document.getElementById("salary").value;
//2.创建;
var table = document.getElementById("table");
var tbRow = table.insertRow(table.tBodies.length);
//2.1.添加属性;
var bn = document.createElement("input");
bn.type="button";
bn.value="delete";
bn.οnclick=function (){
f_delete(this);
};
tbRow.inserCell(0).innerHTML=name;
tbRow.inserCell(1).innerHTML=salary;
tbRow.inserCell(2).appendChild(bn);
}
//删除 注意:一定要记得找对父节点;要删除的节点也一定要对应好;
function f_delete(obj){
var tb = document.getElementById("tb");
tb.removeChild(obj.parentNode.parentNode);
}
</script>
<body>
<table id= "table" border = 1 align = "center" cellpadding = "5px" width = "60%" >
<thead>
<tr>
<td>name</td>
<td>salary</td>
</tr>
</thead>
<tbody id= "tb">
<tr>
<td>jack</td>
<td>1000</td>
<td><input type="button" value="delete" οnclick="f_delete(this)"/></td>
</tr>
</tbody>
</table>
<form>
name:<input type="text" id="name"/>
salary:<input type="text" id="salary"/>
<input type="button" value="add" οnclick="f_add()">
</form>
</body>
</html>select情况:
a) 获取要操作的值;
1.传参; --this.selectedIndex;
2.document.getElementById(); for(i in id.options){ if(id.options[i].selected==true)}
b) selecet增删改;
增: 注意:s2.appendChild(s1.options[i])不兼容, s2.options[s2.options.length]=s1.options[i];不兼容,因为会将s1的值给s2且s1的值为空(有些会 有些不会);
var sop = select1.options[i];
var op = new Option(sop.text,sop.value);
select2.options[selecet2.options.length] = op;
这种方法是对不兼容的方法2改进:通过s1.options[i]来new一个新的Option,它的值还是s1.option[i]值 不过是一个新的对象,再将这个对象给s2.options[i]这就不会将 s1.opitons[i]置空了
删: 注意:i一定要从后面开始,因为Array长度是变化的options删去0时原来的1变成了0依次递减,再删1时就是原来的2,这样就跳着删,只删除的一半;
for(var i=s1.options.length-1;i>=0;i--){
方法1:select.options[i]=null; 部分删
}
方法2:s2.innerHTML=""; 部分删
方法3:s2.length=0; 全删
方法4:s2.options.length=0; 全删
改:
select.options[i]="修改值";
---select对象---
<select>
<option value="">xxx</option>
</select>
属性:
selectedIndex:用户选中的下标的序号
options:是一个数组,表示所有的选项,每一个元素都是一个option对象
length:表示选项的个数
s.options.length == s.length :true
--option对象
value:option的value属性的值
text:option标记之间的文本
selected:true|false 表示该选项是否被选中
创建新的option对象:
var op = new Option(text,value)
<html>
<head>
<style>
.d1{
width:500px;
height:500px;
background-color:#cccccc;
margin:50px auto;
}
.d1_head{
background-color:yellow;
color:green;
font-size:50px;
}
.d1_body{
padding:20px 50px;
}
.s{
width:150px;
height:300px;
}
.bn{
width:50px;
margin-top:10px;
}
</style>
<script>
/*
1.获值;
*/
function toMove(id1,id2){
//被选择下拉框
var s1 = document.getElementById(id1);
//目标下拉框
var s2 = document.getElementById(id2);
//1.获值;从后面开始;前面开始因为长度是在变化的;
var flag=0;
for(var i=s1.options.length-1;i>=0;i--){
//1.获值;
if(s1.options[i].selected==true){
//2.增加,删除;s1.options[i]消失的原因是将s1.options[i]给了别人 而且自己的值没有了;这是一个要注意的细节;
// s2.options[s2.options.length]=s1.options[i];
//所以下面的方法,将s1.options[i]值new一个新的Option对象 再将这对象赋值s2中的options就不会出现上面的情况;同时要记得清空：
var s1op =s1.options[i];
var op = new Option(s1op.text,s1op.value);
s2.options[s2.options.length]=op;
s1.options[i]=null;
flag=1;
//当再次设置null的时候 就影响到其他的options[i]了;
// s1.options[i]=null;
}
}
if(flag==0){
alert("至少选择一项！");
}
}
function allMove(id1,id2){
//被选择下拉框
var s1 = document.getElementById(id1);
//目标下拉框
var s2 = document.getElementById(id2);
//1.获值;从后面开始;前面开始因为长度是在变化的;
for(var i=s1.options.length-1;i>=0;i--){
//2.增加,删除：
var s1op =s1.options[i];
var op = new Option(s1op.text,s1op.value);
s2.options[s2.options.length]=op;
//s2.appendChild(s1.options[i]) //不兼容问题:select中的添加
//s2.options[s2.options.length]=s1.options[i]; //不兼容问题:有些s1.options[i]会直接赋值后为空,有些不会;
flag=1;
// s1.options[i]=null;
}
}
</script>
</head>
<body>
<div class="d1">
<div class="d1_head">移动多选框</div>
<div class="d1_body">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<select class="s" id="s1" multiple="multiple">
<option value="0">wanger</option>
<option value="1">zhangsan</option>
<option value="2">lisi</option>
<option value="3">wagnwu</option>
<option value="4">zhaoliu</option>
<option value="5">xiaoqi</option>
</select>
</td>
<td align="center">
<input class="bn" type="button" value="-->" οnclick="toMove('s1','s2')"/>
<input class="bn" type="button" value="-->>" οnclick="allMove('s1','s2')"/>
<input class="bn" type="button" value="<--" οnclick="toMove('s2','s1')"/>
<input class="bn" type="button" value="<<--" οnclick="allMove('s2','s1')"/>
</td>
<td>
<select class="s" id="s2" multiple="multiple">
</select>
</td>
</tr>
</table>
<div>
</div>
</body>
</html>select二级联动
<html>
<script>
function f_changess(obj){
//1.获取值 idx;
var idx =obj.selectedIndex;
//2.创建;
var arr= new Array();
arr[0]= [new Option("--方向--","yx")];
arr[1]= [new Option("信科","xk"),new Option("计算机科学与应用","jsjkxyyy"),new Option("软件工程","rjgc")];
arr[2]= [new Option("商务英语","swyy"),new Option("应用英语","yyyy")];
//3.级联改变;
var s2 = document.getElementById("s2");
s2.innerHTML="";
for(i in arr[idx]){
s2.appendChild(arr[idx][i]);
}
}
</script>
<body>
<select id= "s1" selectedIndex= 0 οnchange= "f_changess(this)">
<option id = "0">--专业--</option>
<option id = "1">--计算机--</option>
<option id = "2">--英语--</option>
</select>
<select id= "s2" >
<option id = "0">--方向--</option>
</select>
</body>
</html>
扫一扫
6511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
