下面的代码显示了当鼠标光标在一个Map标记上时高亮显示表格中的一行。这是可行的，但并不是对所有Map标记都有效，尽管日志中有值。我试过在marker.on上使用trim（）函数，但这显然不是问题所在。问题可能是什么呢？
现在选择是这样的
AAA no
BBB Yes
CCC no
DDD Yes
FFF-noMap脚本
<script>
function createmaprker(dataArray) {
var map = L.map('viewmap').setView([51.56, -0.12], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
for (var i = 0; i < dataArray.length; i++) {
var marker = L.marker([dataArray[i][5], dataArray[i][6]]).addTo(map);
marker.bindPopup("Book: " + dataArray[i][2] + "<br>" + "Pages: " + dataArray[i][3]);
marker.on("mouseover", function(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
var tr = $("#data-table").find("td").filter(function() {
return $(this).text() == content.split("<br>")[0].split(": ")[1];
}).closest("tr");
tr.addClass("highlight");
});
marker.on("mouseout", function(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
var tr = $("#data-table").find("td").filter(function() {
return $(this).text() == content.split("<br>")[0].split(": ")[1];
}).closest("tr");
tr.removeClass("highlight");
});
}
}
</script>code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
function getData() {
var values=[['111', '1111', 'AAA', '752', 'Hardcover', '51.55', '-0.11'], ['222', '5555', 'BBB',' 1040', 'Hardcover', '51.55', '-0.10'], ['333', '777','CCC', '846', 'Hardcover', '51.565', '-0.11'], ['444', '888', 'DDD','258','Paperback', '51.56', '-0.12'], ['555', '555',' FFF',' 789','Hardcover', '51.55', '-0.13']]
return values;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}脚本数据
<script>
google.script.run.withSuccessHandler(showData).getData();
function showData(dataArray){
console.log(dataArray);
createmaprker(dataArray);
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
columns: [
{"title":"Rating"},
{"title":"Reviews"},
{"title":"Book"},
{"title":"Pages"},
{"title":"Type"},
{"title":"Longitude"},
{"title":"Latitude"},
]
});
});
}
</script>指标
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<?!= include('Scriptdata'); ?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
body {
margin: 0;
padding: 0;
}
#viewmap {
width: 60%;
height: 60vh;
left: 0%;
margin: auto;
}
#text {
font-family: Georgia, 'Times New Roman', Times, serif;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row">
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
</table>
</div>
</div>
<div id="viewmap"></div>
<?!= include('Mapscript'); ?>
</body>
</html>
1条答案
按热度按时间ttp71kqs1#
问题是DataTables斑马条纹样式会干扰您尝试用深灰色条纹突出显示行。
一种解决方法是从HTML表定义中删除
table-striped。如果你想保留你的斑马条纹，你需要添加
!important到你的高亮样式：您可以在官方DataTables文档中看到这样的示例：Highlighting rows and columns.
点击该页面上的"CSS"标签，查看他们正在使用的样式示例。
此处的数据集中还有一个小的排印错误：
' FFF'-注意第一个F之前额外空间。