gpt4 book ai didi

jquery - 创建一个 css 类数组以使用通配符添加/删除它们

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:16 25 4
gpt4 key购买 nike

感谢出色的 PHPExcel 类,我制作了一个脚本,可将 XLS 或 XSLX 文件转换为 HTML 表格。对 HTML 表格应用 CSS 样式以创建漂亮的布局。 Excel 文件也可能具有嵌入式样式,例如单元格背景和/或前景色,在转换过程中我也保留了这些样式。生成的 HTML 代码作为字符串存储到 MYSQL DB 中,然后在请求时以简单的 echo 显示。

我的脚本读取 Excel 嵌入样式,将它们转换为 CSS 类并将它们保存到 HTML 代码中,如下所示:

<style>
.excelBackColor_FFFF00 { background-color: #FFFF00 !important; }
.excelBackColor_3F48CC { background-color: #3F48CC !important; }
.excelForeColor_FF0000 { color: #FF0000 !important; }
</style>

我决定以这种方式编写类的原因是:

  1. Excel 单元格可能有不止一种背景颜色(A1 -> 黄色、B4 -> 红色、C8 -> 蓝色等)
  2. 需要 !important 属性来覆盖用于设置 HTML 表格样式的 CSS 文件
  3. 我需要使用类,因为我的目标是使用 JQuery 添加/删除这些类,只需单击一下

我确实找到了使用通配符删除类的方法,但是经过多次尝试我认为不可能使用通配符添加被删除的类!要添加或删除类,我需要知道它们的名称,但由于这些类是在转换过程中创建的,我只能通过解析 HTML 来知道它们的名称,所以我相信获取类名称的唯一方法就是创建这些类的数组,然后通过应用通配符来添加/删除类。

请你帮我:

  1. 获取类名并将它们写入数组
  2. 向我解释如何从数组中检索类并使用通配符添加/删除它们 这样我就可以通过简单地操作 .excelBackColor* 来删除所有背景颜色> 然后通过点击以相同的方式将它们添加回去。

最佳答案

这应该可以解决问题。只是不要只使用 jQuery,还要使用 javascript 和正则表达式。要了解有关正则表达式的更多信息,您可以访问 regex101.com。

<!DOCTYPE html>
<head>
<meta charset="utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style id="excel-style">
.excelBackColor_FFFF00 { background-color: #FFFF00 !important; }
.excelBackColor_3F48CC { background-color: #3F48CC !important; }
.excelForeColor_FF0000 { color: #FF0000 !important; }
.someother_class {}
p {}
</style>

<script type="text/javascript">
$(document).ready(function() {
// DOM is ready
// PART 1
var excel_style = $("#excel-style").html();
// parse using regex to get an array of all classes that start with '.excel'
var excel_classes = excel_style.match(/\.excel[a-z0-9\-_]+/gi);

// PART 2
// function to remove all classes using 'wildcards'
function removeExcelBackColor() {
// first match all elements with a selector
$("[class^='.excelBackColor']").each(function( index ) {
// now get all the classes as a string in a temp var
var tmp_classes = $(this).attr('class');
// remove every class that starts with .excelBackColor
var clean_classes = tmp_classes.replace(/\.excelBackColor[a-z0-9\-_]+/gi, '');
// assign leftover classes
$(this).attr('class', clean_classes);
});
}

// Call our function.
removeExcelBackColor();

// you could bind that to a click event like so:
$("#mybutton").click(function() {
removeExcelBackColor();
});

});
</script>


</head>
<body>
<table id="excel_table">
<tr>
<td class=".excelBackColor_FFFF00 other_class">data 1</td>
<td class=".excelBackColor_3F48CC keep_this_class">data 2</td>
<td class=".excelForeColor_FF0000">data 3</td>
</tr>
</table>
</body>
</html>

关于jquery - 创建一个 css 类数组以使用通配符添加/删除它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31022174/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com