DOM的高级操作——表单的添加／删除／获取

最新推荐文章于 2023-03-30 20:28:46 发布

辛篱

最新推荐文章于 2023-03-30 20:28:46 发布

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签： javascript 表单 DOM

本文链接：https://blog.csdn.net/honey_1234567890/article/details/50631607

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM的高级操作——表单的添加／删除／获取

1 表格应用-1

①获取表单元素

应用1：弹出“张三”

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>

<script>
window.οnlοad=function()
{
	var oTab=document.getElementById('tab1');
	
	//弹出“张三”
	alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[1].innerHTML);
};
</script>

</head>

<body>
<table id="tab1" border="1px" width="500px">
    <thead>
        <th>ID</th>
        <th>姓名</th>
        <th>内容</th>
        <th>发布时间</th>
        <th>操作</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>新年快乐</td>
            <td></td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>sdaskdkla</td>
            <td></td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>237189378</td>
            <td></td>
            <td><a href="javascript:;">删除</a></td>
        </tr>
    </tbody>
</table>
</body>
</html>

可以用最初的方法getElementById或者getElementsByTagName来获取表单元素，只是较为冗长些。其实在DOM中有专有名词代替我们之前使用的方法：①tBodies等同于getElementsByTagName(‘tbody’); ②rows等同于getElementsByTagName(‘tr’) ③cells等同于getElementsByTagName(‘td’) ④tHead：表头 ⑤tFoot：表尾

所以我们可以将上述案例中的alert写成：

alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);

应用2：表单隔行变色（在上述案例的基础上添加了几行信息）

window.οnlοad=function()
{
	var oTab=document.getElementById('tab1');
	
	
	//alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);
	for(var i=0;i<oTab.tBodies[0].rows.length;i++)
	{
		if(i%2==0)
		{
			oTab.tBodies[0].rows[i].style.background="gray";
		}
		else
		{
			oTab.tBodies[0].rows[i].style.background="";
		}
	}
};

应用3：当鼠标移入时，鼠标所在行的背景颜色为黄色。当鼠标移除时，表单恢复原貌。（方便阅读）

window.οnlοad=function()
{
	var oTab=document.getElementById('tab1');
	var oldColor='';
	
	for(var i=0;i<oTab.tBodies[0].rows.length;i++)
	{
		if(i%2==0)
		{
			oTab.tBodies[0].rows[i].style.background="gray";
		}
		else
		{
			oTab.tBodies[0].rows[i].style.background="";
		}
		
		oTab.tBodies[0].rows[i].οnmοuseοver=function()
		{
			oldColor=this.style.background;
			this.style.background='yellow';
		};
		oTab.tBodies[0].rows[i].οnmοuseοut=function()
		{
			this.style.background=oldColor;
		};
	}
};

注意：我们需将原有的背景颜色提前存储起来，便于恢复原貌时使用。

②表单的添加/删除

应用：将这篇博客的第一个小案例改成类似微博的功能：①可以随时发布新的微博信息，并显示信息发布时间。②每次新发布的的微博信息必须插在列表首位，方便及时阅读。③可以随时删除不需要的微博信息。（js是前端脚本语言不具有保存功能，在日后学习ＰＨＰ和数据库后，我们再继续补充其功能）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM：表单</title>

<script>
function toDou(n)
{
	if(n<10)
	{
		return '0'+n;
	}
	else
	{
		return ''+n;
	}
}	
window.οnlοad=function()
{
	var oTxt1=document.getElementById("txt1");
	var oTxt2=document.getElementById("txt2");
	var oBtn=document.getElementById("btn1");
	var oTab=document.getElementById('tab1');
	
	//获取系统时间
	var oDate=new Date();
	var iYear=oDate.getFullYear();//年
	var iMonth=oDate.getMonth();//月
	var iDate=oDate.getDate();//日
	var str=''+iYear+'-'+toDou(iMonth+1)+'-'+toDou(iDate)
					+' '+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
	
	
	var id1=oTab.tBodies[0].rows.length+1;
	
	oBtn.οnclick=function()
	{
		var oTr=document.createElement('tr');
		var oTd=document.createElement('td');
		oTd.innerHTML=id1++;
		oTr.appendChild(oTd);
		var oTd=document.createElement('td');
		oTd.innerHTML=oTxt1.value;
		oTr.appendChild(oTd);
		var oTd=document.createElement('td');
		oTd.innerHTML=oTxt2.value;
		oTr.appendChild(oTd);
		var oTd=document.createElement('td');
		oTd.innerHTML=str;
		oTr.appendChild(oTd);
		var oTd=document.createElement('td');
		oTd.innerHTML='<a href="javascript:;">删除</a>';
		oTr.appendChild(oTd);
		
		oTab.tBodies[0].appendChild(oTr);
		
		oTd.getElementsByTagName('a')[0].οnclick=function()
		{
			oTab.tBodies[0].removeChild(this.parentNode.parentNode);
		};
	};
	
};
</script>

</head>

<body>
姓名：<input type="text" id="txt1" />
内容：<input type="text" id="txt2" />
<input type="button" id="btn1" value="添加"/>
<br/><br/>
<table id="tab1" border="1px" width="500px">
    <thead>
        <th>ID</th>
        <th>姓名</th>
        <th>内容</th>
        <th>发布时间</th>
        <th>操作</th>
    </thead>
    <tbody>
    </tbody>
</table>
</body>
</html>

辛篱

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DOM的高级操作——表单的添加／删除／获取

DOM的高级操作——表单的添加／删除／获取1 表格应用-1①获取表单元素应用1：弹出“张三”表单window.onload=function(){ var oTab=document.getElementById('tab1'); //弹出“张三” alert(oTab.getElementsByTagName('tbody')[0].getEle
复制链接

扫一扫