jquery怎么动态改变rowspan值-前端问答-PHP中文网

首页

web前端

前端问答

jquery怎么动态改变rowspan值

May 23, 2022 pm 05:42 PM

jquery

改变方法：1、获取需要跨行的单元格元素，语法“$("指定单元格元素")”，会返回一个包含指定元素的jquery对象；2、用attr()给指定元素对象修改rowspan属性，语法“指定元素对象.attr("rowspan","行数值")”。

jquery怎么动态改变rowspan值

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

rowspan，是HTML语言中的一个元素属性，用于指定单元格应跨越的行数。

也就是说，如果一行跨越两行，则意味着它将占用该表中两行的空间。它允许单个表格单元格跨越多个单元格或行的高度。rowspan属性与Excel中的电子表格的“合并单元格”有相同的功能。

rowspan属性可以与HTML表中的<td>和<th>元素一起使用。

rowspan属性与<td>标签一起使用时，rowspan属性决定了它应跨越的标准单元格数。
当rowspan属性与<th>标签一起使用时，rowspan属性确定它应该跨越的标题单元格的数量。

jquery怎么改变rowspan值

1、获取需要跨行的单元格元素（td或th）

$(&quot;单元格元素&quot;)

登录后复制

会返回包含指定单元格元素的jquery对象

2、使用attr()修改rowspan属性

元素对象.attr(&quot;rowspan&quot;,&quot;行数值&quot;)

登录后复制

示例：

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

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

&lt;/html&gt;

登录后复制