您正在使用 IPV4 [3.236.145.153] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中      
[公益] 地球是我家,绿化靠大家      
2024年 妇女节 010
2024年 清明节 037
2025年 元 旦 309
2025年 春 节 337
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JS表格的动态操作完整示例
内容摘要: htmlheadtitlejs-表格的动态操作/titlemetacharset='UTF-8'/styletype='text/css'#tatr{height:20px;}#t1{font-weight:bold;/*align-content:center;*//*不能设置文本内容居中*/}/stylescripttype='text/javascri......
<html>

<head>

<title>js-表格的动态操作</title>

<metacharset="UTF-8"/>

<styletype="text/css">

#tatr{

height:20px;

}

#t1{

font-weight:bold;

/*align-content:center;*/

/*不能设置文本内容居中*/

}

</style>

<scripttype="text/javascript">

functiondelectOper(btn){

//获取table对象,我们用其进行其对子元素的操作

varta=document.getElementById("ta")

//获取其父类对象

vartr=btn.parentNode.parentNode;//我们进行删除操作是删除其所在的行,所以我们用两次parent操作,第一层得到其所在的列(单元格),再进一层得到其所在的行对象

//执行删除操作

ta.deleteRow(tr.rowIndex);//进行删除操作时,我们用父类对象删除子类对象,

//注:对于div等对象我们可以使用remove方法,但是对于表格的属性我们利用delete进行操作,而且我们利用他的rowIndex(行号)而不是其id亦或是对象

//我们没法对每一个行设置一个id所以用这种方法(通过调入对象找到其父类对象)更加的方便

}

functionchangeOper(n){

//varn=n;

//获取修改的位置对象

varcell=document.getElementById("cell"+n);

//进行一定的限制(只有是数字的情况下才能进行拼接)

if(!isNaN(Number(cell.innerHTML))){//isNAN如果是true则表示数值不是数字,如果不添加就会产生连续点击修改时出现把源码拼接上的情况

//修改对象的类型

cell.innerHTML="<inputtype='text'value='"+cell.innerHTML+"'onblur='changeOper2(this,this.parentNode)'/>"//利用value='"+cell.innerHTML+"'可以实现内容的拼接注意:其内部的值是"+cell.innerHTML+"一个拼接量

//注意格式:在""内部的要用'',//不知道为什么在内部不能直接把cell和n当参数传出去,但是可以传this对象,所以对应的我们利用this,简介传出其父对象

}//还有一个bug:当用户输入的值是字符(不是数字),其也会进行value的赋值,但是无法再触发修改按键,只能检索原对象的内容类型,无法检索用户的

}

functionchangeOper2(inp,cell){

//获取修改位置对象

//varcell=document.getElementById("cell"+n);

//修改对象的类型

cell.innerHTML=inp.value;//通过对象获得用户修改获得value值

}

//明白了:document可以调用任何的id,(好比其他都是全局变量一样),但是他的局限是获取的方法有限,必须有特定的属性才能获取

//document。innerHTML是对其内部的内容进行重写。

</script>

</head>

<body>

<h3align="center">表格的动态操作</h3>

<hr/>

<tableborder="1px"id="ta"align="center"><!--align可以直接把整个表格居中-->

<trid="t1"align="center">

<tdwidth="200px">Animation</td>

<tdwidth="100px">上映年份</td>

<tdwidth="100px">评分(10分)</td>

<tdwidth="200px">投币</td>

<tdwidth="200px">操作</td>

</tr>

<tralign="center">

<td>clannad</td>

<td>2008</td>

<td>9.9</td>

<tdid="cell2">100</td>

<td>

<inputtype="button"name=""id=""value="修改"onclick="changeOper(2)"/>

<inputtype="button"name=""id=""value="删除"onclick="delectOper(this)"/>

</td>

</tr>

<tralign="center">

<td>月色真美</td>

<td>2017</td>

<td>9.4</td>

<tdid="cell3">70</td>

<td>

<inputtype="button"name=""id=""value="修改"onclick="changeOper(3)"/>

<inputtype="button"name=""id=""value="删除"onclick="delectOper(this)"/>

</td>

</tr>

<tralign="center">

<td>境界的彼方</td>

<td>2013</td>

<td>9.4</td>

<tdid="cell4">60</td>

<td>

<inputtype="button"name=""id=""value="修改"onclick="changeOper(4)"/>

<inputtype="button"name=""id=""value="删除"onclick="delectOper(this)"/>

</td>

</tr>

</table>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:css3实现背景图片颜色修改的多种方式

 

下一篇:JS动态显示表格上下frame的方法

发布日期:2024/1/25
手机扫二维码直达本页
发布时间:15:05:36
点  击:28
录  入:伊伊
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....