JavaScript获取表格的行数和列数

<html>
<head>
	<script type="text/javascript">
		function show(){
			var tab = document.getElementById("test") ;
			//表格行数
			var rows = tab.rows.length ;
			//表格列数
			var cells = tab.rows.item(0).cells.length ;
			alert("行数"+rows+" ,列数"+cells);
		}
	</script>
</head>
<body>
	<table id="test" border="1">
		<tr>
			<td>科目</td><td>成绩</td><td>排名</td>
		</tr>
		<tr>
			<td>数学</td><td>100</td><td>1</td>
		</tr>
	</table>
		<input type="button" οnclick="show();" value="查看"/>
</body>
</html>

JavaScript中,你可以使用`prompt`函数获取用户输入的行数列数,然后使用`document.write`或者`innerHTML`方法在HTML页面上输出一个表格。以下是使用`document.write`实现的示例代码: ```javascript // 获取用户输入的行数列数 var rows = prompt("请输入表格行数:"); var columns = prompt("请输入表格列数:"); // 将输入的行数列数转换为数字类型,防止后续操作出错 rows = parseInt(rows, 10); columns = parseInt(columns, 10); // 检查输入是否有效 if (isNaN(rows) || isNaN(columns) || rows < 1 || columns < 1) { document.write("输入的行数列数必须是有效的正整数!"); } else { // 开始创建表格 document.write("<table border='1'>"); // 开始表格,设置边框为1 // 循环创建每一行 for (var i = 0; i < rows; i++) { document.write("<tr>"); // 开始一行 // 循环创建每一列 for (var j = 0; j < columns; j++) { document.write("<td>单元格</td>"); // 创建一个单元格 } document.write("</tr>"); // 结束一行 } document.write("</table>"); // 结束表格 } ``` 如果你想要使用`innerHTML`方法来更新页面上的一个已经存在的元素,你需要先在HTML中定义一个容器元素,比如: ```html <div id="table-container"></div> ``` 然后,使用JavaScript获取这个元素,并更新它的`innerHTML`: ```javascript // 获取用户输入的行数列数 var rows = prompt("请输入表格行数:"); var columns = prompt("请输入表格列数:"); // 获取页面上的表格容器元素 var tableContainer = document.getElementById('table-container'); // 检查输入是否有效 if (rows && columns) { // 开始创建表格 tableContainer.innerHTML = "<table border='1'>"; // 开始表格 // 循环创建每一行 for (var i = 0; i < rows; i++) { tableContainer.innerHTML += "<tr>"; // 开始一行 // 循环创建每一列 for (var j = 0; j < columns; j++) { tableContainer.innerHTML += "<td>单元格</td>"; // 创建一个单元格 } tableContainer.innerHTML += "</tr>"; // 结束一行 } tableContainer.innerHTML += "</table>"; // 结束表格 } else { tableContainer.innerHTML = "输入的行数列数必须是有效的正整数!"; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值