Home  >  Article  >  Web Front-end  >  How to dynamically change the rowspan value in jquery

How to dynamically change the rowspan value in jquery

青灯夜游
青灯夜游Original
2022-05-23 17:42:103803browse

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)

    $("单元格元素")

    will return a jquery object containing the specified cell element

    2. Use attr() to modify the rowspan attribute

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

    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>

    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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn