How to dynamically change the rowspan value in jquery-Front-end Q&A-php.cn

How to dynamically change the rowspan value in jquery

青灯夜游

Release： 2022-05-23 17:46:11

Original

3831 people have browsed it

Change method: 1. Get the cell elements that need to cross rows. The syntax "$("specified cell element")" will return a jquery object containing the specified element; 2. Use attr() to specify The element object modifies the rowspan attribute, the syntax is "specify the element object.attr("rowspan","row value")".

How to dynamically change the rowspan value in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

rowspan is an element attribute in HTML language, used to specify the number of rows that a cell should span.

That is, if a row spans two rows, it means that it will occupy the space of two rows in the table. It allows a single table cell to span the height of multiple cells or rows. The rowspan attribute has the same function as the spreadsheet's "merged cells" in Excel.

The rowspan attribute can be used with the

and elements in HTML tables.

rowspan attribute When used with the
tag, the rowspan attribute determines the number of standard cells it should span.

When the rowspan attribute is used with the

tag, the rowspan attribute determines the number of header cells it should span.

How to change the rowspan value in jquery

1. Get the cell elements that need to span rows (td or th)

$("单元格元素")

Copy after login

will return a jquery object containing the specified cell element

2. Use attr() to modify the rowspan attribute

元素对象.attr("rowspan","行数值")

Copy after login

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("#zk").attr("rowspan","3")
				});
			});
		</script>
	</head>

	<body class="ancestors">
		<table border="1">
			<tr>
				<th>商品</th>
				<th>价格</th>
				<th>假期折扣价</th>
			</tr>
			<tr>
				<td>T恤</td>
				<td>￥100</td>
				<td id="zk" rowspan="2">￥50</td>
			</tr>
			<tr>
				<td>牛仔褂</td>
				<td>￥250</td>
			</tr>
			<tr>
				<td>牛仔库</td>
				<td>￥150</td>
			</tr>
		</table><br>
		<button>改变rowspan值</button>
	</body>

</html>

Copy after login

How to dynamically change the rowspan value in jquery

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of How to dynamically change the rowspan value in jquery. For more information, please follow other related articles on the PHP Chinese website!