在html中实现点击表格表头进行排序,并获取排序后的行对象。

 首先写一个表格,

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="table-content">
			<div class="table-class">
				<div id="myTable">
				</div>
			</div>
		</div>
	</body>
	<script>
		var html1=''
		initTable()
		function initTable() {
		tableList = [{
			id: 001,
			name: "1号机",
			state: "2"
		}, {
			id: 002,
			name: "2号机",
			state: "1"
		}, {
			id: 003,
			name: "3号机",
			state: "2"
		}]
		
		html1 += `  <div class="tableClass">
		    <table style="font-size:0.9rem;" id="mytable">
				<thead>
					<tr>
						<th style="width:5rem;text-align: center;">编号</th>
						<th style="width:5rem;text-align: center;">名称</th>
						<th style="width:3rem;text-align: center;">状态</th>
					</tr>
				</thead>
				<tbody>
					${tableList.map((item, index) => {
					if (item.state == "1") {
						return	`<tr>
						    <td style="width:5rem;">${item.id}</td>
							<td style="width:5rem;">${item.name}</td>
							<td style="color:rgb(57,212,75);width:3rem;">在线</td>
							</tr>`
					} else {
						return	`<tr>
						    <td style="width:5rem;">${item.id}</td>
							<td style="width:5rem;">${item.name}</td>
							<td style="color:rgb(255, 0, 0);width:3rem;">不在线</td>
							</tr>`}
					}).join('')
				} </tbody> </table > </div> `
				document.getElementById("myTable").innerHTML = html1;	
	}
	</script>
</html>

然后使用菜鸟教程里面的排序方法

//https://www.runoob.com/w3cnote/js-sort-table.html
		function sortTable(n) {
			var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
			table = document.getElementById("mytable");
			switching = true;
			//设置排序方向为升序:
			dir = "asc";
			/*创建一个循环,直到没有切换完成:*/
			while (switching) {
				//开始说:没有切换完成:
				switching = false;
				rows = table.rows;
				/*遍历所有表格行(除了第一行,它包含表格标题):*/
				for (i = 1; i < (rows.length - 1); i++) {
					// 首先说不应该有切换:
					shouldSwitch = false;
					/*获取要比较的两个元素,一个来自当前行,一个来自下一行:*/
					x = rows[i].getElementsByTagName("TD")[n];
					y = rows[i + 1].getElementsByTagName("TD")[n];
					/*检查两行是否应该交换位置,基于方向,asc 或 desc:*/
					if (dir == "asc") {
						if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
							// 如果是这样,标记为一个开关并打破循环:
							shouldSwitch = true;
							break;
						}
					} else if (dir == "desc") {
						if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
							// 如果是这样,标记为一个开关并打破循环:
							shouldSwitch = true;
							break;
						}
					}
				}
				if (shouldSwitch) {
					/*如果已经标记了一个开关,则进行开关并标记一个开关已经完成:*/
					rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
					switching = true;
					//每次完成切换,将此计数增加 1:
					switchcount++;
				} else {
					/*如果没有进行切换并且方向为“asc”,则将方向设置为“desc”并再次运行 while 循环。*/
					if (switchcount == 0 && dir == "asc") {
						dir = "desc";
						switching = true;
					}
				}
			}
			console.log("table", table)
		}

最后是点击获取排序后的行信息

function getRowData(button) {
			var table1 = document.getElementById("myTable"); // 获取表格对象
			var rows = table1.getElementsByTagName("tr"); // 获取表格行对象
			let row = button.parentNode.parentNode;
			var td = event.srcElement; // 通过event.srcElement 获取激活事件的对象 td
			var edd = td.parentElement
			var cells = edd.getElementsByTagName("td")
			const table = tableList
			table.map((item, index) => {
				if (item.id == cells[0].innerText) {
					console.log(item)
					//获取排序后的行的信息
				}
			})
		}

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 你可以通过 `el-table-column` 的 `label` 属性配置表头的内容,然后在对应的列上绑定 `header-click` 事件。例如: ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name" header-click="handleHeaderClick"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="地址" prop="address"></el-table-column> </el-table> ``` 在上面的代码,我们在第一列的 `el-table-column` 上绑定了 `header-click` 事件,并将处理函数设置为 `handleHeaderClick`。接下来在 Vue 实例定义这个方法: ```js methods: { handleHeaderClick(column, event) { console.log('点表头', column.label, event) } } ``` 在方法,`column` 参数表示当前点的列的配置对象,`event` 参数表示原生的 `click` 事件对象。你可以在方法编写处理表头事件的逻辑,例如向后端发送请求重新排序数据等。 ### 回答2: 在使用 Element UI 的 el-table 组件时,如果想要为表头列添加点事件,可以使用表头插槽和自定义方法来实现。 首先,在 el-table 添加 scoped-slot 来定义表头的内容,例如: ```html <el-table> <template v-slot:header="{ column }"> <th @click="handleHeaderClick(column)"> {{ column.label }} </th> </template> <!-- 表格内容 --> </el-table> ``` 在这个示例,我们使用 `v-slot:header="{ column }"` 来获取每个表头列的信息,并在 th 标签上绑定了点事件 `@click` 来调用 `handleHeaderClick` 方法。 然后,在 Vue 实例定义 `handleHeaderClick` 方法来处理点事件,例如: ```javascript methods: { handleHeaderClick(column) { console.log('表头列点事件', column); // 执其他逻辑操作 } } ``` 在这个方法,我们可以对点事件进行一些处理逻辑,例如打印表头列的信息(column)或执其他操作。 这样,当我们点表头列时,就会触发 `handleHeaderClick` 方法,并可以在控制台看到输出的信息。 通过以上方法,我们可以为 el-table 的表头列添加点事件,并能够自定义处理逻辑。 ### 回答3: el-table是Element组件库表格组件,可以用于展示大量的数据。如果需要给el-table的表头列添加点事件,可以通过以下几个步骤实现: 1. 首先,在el-table的<el-table-column>标签添加slot="header"属性,用于设置表头列的自定义内容。例如: ``` <el-table> <el-table-column prop="name"> <template slot="header" slot-scope="scope"> <div @click="headerClickHandler">姓名</div> </template> </el-table-column> </el-table> ``` 在上述代码表头列的内容被放置在了一个<div>标签,并绑定了@click事件。 2. 在Vue实例定义headerClickHandler方法,用于处理点事件的逻辑。例如: ``` methods: { headerClickHandler() { // 点事件的处理逻辑 console.log("表头列被点了"); } } ``` 在上述代码,headerClickHandler方法会在表头列被点时触发。 通过以上步骤,便可以实现el-table表头列的点事件。当表头列被点时,headerClickHandler方法会被调用,并执相应的逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值