Home >Web Front-end >JS Tutorial >How to modify the height of td with jQuery
How to modify the height of td with jQuery
- 青灯夜游Original
- 2021-11-22 11:52:522071browse
JQuery method to modify td height: 1. Use attr() method, syntax "$("td").attr("style","height: height value;");"; 2. Use css() method, syntax "$("td").css("height","height value");".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
How to modify the height of td with jQuery
1. Use the attr() method
attr() method can set the attribute value of the selected element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("td").attr("style","height: 50px;");
});
});
</script>
</head>
<body>
<table border="1">
<caption>人物信息</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table><br />
<button>修改td的高</button>
</body>
</html>
2. Use the css() method
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("td").css("height","50px");
});
});
</script>
</head>
<body>
<table border="1">
<caption>人物信息</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Peter</td>
<td>20</td>
</tr>
<tr>
<td>Lois</td>
<td>20</td>
</tr>
</table><br />
<button>修改td的高</button>
</body>
</html>
Recommended related video tutorials: jQuery Tutorial(Video)
The above is the detailed content of How to modify the height of td with jQuery. For more information, please follow other related articles on the PHP Chinese website!