首頁猿問將點擊圖片的數據保存在表格js中

將點擊圖片的數據保存在表格js中

JavaScript

慕碼人2483693 2022-06-09 11:00:17

我有一個代碼，當您單擊圖像時，它會將一個點與它相關聯。我想要的是每次單擊時，圖像上的關聯點都會存儲在表格中。如果我在圖像上添加 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>

查看完整描述

1 回答

慕婉清6462132

TA貢獻1804條經驗獲得超2個贊

你可以試試下面的代碼：

$(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

}

<body>

<button class="button">Add a point</button>

</div>

<table>

<tr>

<th>PointID</th>

</tr>

</thead>

</tbody>

</table>

</body>

反對回復 2022-06-09

1 回答
0 關注
147 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將點擊圖片的數據保存在表格js中

將點擊圖片的數據保存在表格js中

1 回答

添加回答