《查找表格内部元素及对其内容动态修改【查找表格控件】》

最新推荐文章于 2022-01-18 09:18:38 发布

卡布奇诺奶茶的独特

最新推荐文章于 2022-01-18 09:18:38 发布

阅读量336

点赞数

分类专栏： Web小技能文章标签： web前端 html

本文链接：https://blog.csdn.net/qq_35119220/article/details/62041156

版权

Web小技能专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文档介绍了如何在Web应用中查找表格控件并动态修改其内容，提供了相关代码细节，适合前端开发者参考。

摘要由CSDN通过智能技术生成

概述：

此文件叙述了如何动态查找和修改表格内的内容，或许对您有所帮助. 吐舌头

代码详情：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="卡布奇诺奶茶的独特">
  <meta name="Keywords" content="表格控件，查找表格内容，修改表格内容，">
  <meta name="Description" content="此文件叙述了如何动态查找和修改表格内的内容，或许对您有所帮助.">
  <title>查找表格内部元素及对其内容动态修改【查找表格控件】</title>
 </head>
	
	<!--表格和DIV样式[css]-->
	<style type="text/css">
	
		#myTable{
			width:65%;
			border-collapse:collapse;
			text-align:center;
			margin:0 auto;
			font-family:微软雅黑;
		}
		tr:nth-child(2n+1){
			background:#F2F2F2;
		}
		#myDiv{
			padding:0px 100px 0px 235px;
		}
		#myDiv01{
			padding:0px 100px 0px 235px;
			font-size:12px;
			font-weight:bold;
		}
	
	</style>

	<!--动态修改表格内容的相关函数[JS]-->
	<script type="text/javascript" language="javascript">
	
		function updateContent(){
			var row = document.getElementById("row").value;
			var cell = document.getElementById("cel").value;
			var t = document.getElementById("myTable");
			//t.rows[row-1].cells[cell-1].innerHTML = document.getElementById("source").value;
			/*亦可此种写法*/
			t.rows.item(row-1).cells.item(cell-1).innerHTML = document.getElementById("source").value;
		}
	
	</script>


 <body>
  
	<!--ele start-->
	<table id="myTable" border="1">

		<caption>英文字母表</caption>
		<tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
		</tr>
		<tr>
			<td>D</td>
			<td>E</td>
			<td>F</td>
		</tr>
		<tr>
			<td>G</td>
			<td>H</td>
			<td>I</td>
		</tr>
		<tr>
			<td>J</td>
			<td>K</td>
			<td>L</td>
		</tr>
		<tr>
			<td>M</td>
			<td>N</td>
			<td>O</td>
		</tr>
		<tr>
			<td>P</td>
			<td>Q</td>
			<td>R</td>
		</tr>

	</table>
	<!--ele end-->
	<hr/>
	<!--ele start-->
	<div id="myDiv">
		<input type="button" value="获取标题"
		οnclick="alert(document.getElementById('myTable').caption.innerHTML);"/>

		<input type="button" value="第一行第一格"
		οnclick="alert(document.getElementById('myTable').rows[0].cells[0].innerHTML);"/>
		<input type="button" value="第二行第二格"
		οnclick="alert(document.getElementById('myTable').rows[1].cells[1].innerHTML);"/>
		<input type="button" value="第三行第二格"
		οnclick="alert(document.getElementById('myTable').rows[2].cells[1].innerHTML);"/>
	</div>
	<!--ele end-->
	<hr/>
	<!--ele start-->
	<div id="myDiv01">

		设置第<input type="text" id="row" size="2"/>行，第<input type="text" id="cel" size="2"/>列
		的值为：<input type="text" id="source" size="10"/> <input type="button" value="确认修改" οnclick="updateContent()"/>

	</div>
	<!--ele end-->
 </body>
</html>

Web截图：

-----------------------------------------------------

吐舌头感谢您的倾心阅读

卡布奇诺奶茶的独特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《查找表格内部元素及对其内容动态修改【查找表格控件】》

概述：此文件叙述了如何动态查找和修改表格内的内容，或许对您有所帮助.代码详情：查找表格内部元素及对其内容动态修改【查找表格控件】 #myTable{ width:65%; border-collapse:collapse; text-align:center; ma
复制链接

扫一扫