Jquery动态给表格中的Td追加class

最新推荐文章于 2022-04-13 13:05:05 发布

原创最新推荐文章于 2022-04-13 13:05:05 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #javascript

本文介绍了如何使用jQuery动态给HTML表格中的<td>元素添加不同类(class)，并根据预设的类名列表调整样式，如设置宽度和文本对齐。通过JavaScript操作DOM，实现在页面加载后根据配置快速应用样式。

Jquery动态给表格中的Td追加class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 	var tableRowClass = "leftWith,conterWidth,conterWidth";
	var tableRowClassArr = tableRowClass.split(",");
	var tableRow = document.getElementsByClassName("tableRowClass");
		jQuery.each(tableRowClassArr,function(index,obj){
			jQuery('.tableRowClass').eq(index).addClass(obj);
		});

	var className = "leftWith,conterWidth,conterWidth,conterWidth,conterWidth,conterWidth,rightWith";
	var classNameArr = className.split(",");
	var tableTr = $('#table1 tr');
	$.each(tableTr,function(index_tr, obj_tr){
		var trChildren= $('#table1 tr').eq(index_tr).children();
		$.each(trChildren, function(index_td, obj_td){
			$.each(classNameArr,function(index_className, obj_className){
				trChildren.eq(index_className).addClass(obj_className);
			})
		})
	})
});
</script>
<style>
	.leftWith{
		width: 100px;
		text-align: left;
	}
	.conterWidth{
		width: 100px;
		text-align: center;
	}
	.rightWith{
		width: 100px;
		text-align: right;
	}
</style>
</head>
<body>
		<table id="table1" border="" cellspacing="" cellpadding="">
			
			<tr class="tableRowClass">
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr class="tableRowClass">
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr class="tableRowClass">
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
</body>
</html>
````html