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:103830browse
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")".
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
-
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>[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!