我有一个代码，当您单击图像时，它会将一个点与其关联。
我想要的是，每次点击时，图像上的关联点都存储在表格中。
如果我在图像上添加 3 个点，请将这 3 个点存储在表中。 因为之后我希望能够点击这些点来添加信息。
非常感谢您的帮助，并对我的英语表示歉意。
这是我的代码 js
<script>
$(document).ready(function () {
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(document).click(function (ev) {
if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {
$(".div1").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'blue',
color: 'white',
textAlign: 'center',
})
);
}
});
});
</script>
<body>
<button class="button">Add a point</button>
<div class="div1">
<img src="photo1.jpg" />
</div>
</body>
最佳答案
您可以尝试以下代码:
$(document).ready(function () {
let count = 0
let resultArray = []
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(".div1").click(function (ev) {
if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {
$(".div1").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'blue',
color: 'white',
textAlign: 'center',
})
);
count = count +1
$("#myTBody").append(
"<tr id='point"+count+"'><td>"+count+"</td><td>"+ev.pageX+"</td><td>"+ev.pageY+"</td></tr>"
)
let point = {
id:count,
x:ev.pageX,
y:ev.pageY
}
resultArray.push(point) // You could use this array to do something you want
$("#point"+count).on('click', function () {
var output = "ID :"+ $(this).children(":first").text()+" X,Y :"+$(this).children().eq(1).text()+""+$(this).children().eq(2).text()
$("#pointInfo").text(output)
});
}
});
});.div1 {
width:200px;
height:100px;
background-color:red;
}
tr:hover {
background-color:yellow;
cursor:pointer
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button class="button">Add a point</button>
<div class="div1">
</div>
<table>
<thead id="myTHead">
<tr>
<th>PointID</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>
<div id="pointInfo"><div>
</body>关于javascript - 将图像的点击数据保存在表格js中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60952738/