猿问

将点击图片的数据保存在表格js中

我有一个代码，当您单击图像时，它会将一个点与它相关联。


我想要的是每次单击时，图像上的关联点都会存储在表格中。


如果我在图像上添加 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>


慕码人2483693
浏览 157回答 1
1回答

慕婉清6462132

你可以试试下面的代码：$(document).ready(function () {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; let count = 0&nbsp; &nbsp; &nbsp; &nbsp; let resultArray = []&nbsp; &nbsp; &nbsp; &nbsp; var addPoint = false;&nbsp; &nbsp; &nbsp; &nbsp; $(".button").on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addPoint = !addPoint // will toggle false -> true or true -> false;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $(".div1").click(function (ev) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".div1").append(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('<div></div>').css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 'absolute',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: ev.pageY + 'px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: ev.pageX + 'px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: '20px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: '20px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderRadius: '20px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: 'blue',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: 'white',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textAlign: 'center',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count = count +1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#myTBody").append(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"<tr id='point"+count+"'><td>"+count+"</td><td>"+ev.pageX+"</td><td>"+ev.pageY+"</td></tr>"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let point = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;id:count,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x:ev.pageX,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;y:ev.pageY&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resultArray.push(point) // You could use this array to do something you want&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#point"+count).on('click', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var output = "ID :"+ $(this).children(":first").text()+"&nbsp; X,Y :"+$(this).children().eq(1).text()+""+$(this).children().eq(2).text()&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#pointInfo").text(output)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });.div1 {&nbsp; width:200px;&nbsp; height:100px;&nbsp; background-color:red;}tr:hover {&nbsp; background-color:yellow;&nbsp; cursor:pointer}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body>&nbsp; &nbsp; <button class="button">Add a point</button>&nbsp; &nbsp; <div class="div1">&nbsp; &nbsp; </div>&nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp;<thead id="myTHead">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>PointID</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>X</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Y</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp;</thead>&nbsp; &nbsp; &nbsp; &nbsp;<tbody id="myTBody">&nbsp; &nbsp; &nbsp; &nbsp;</tbody>&nbsp; &nbsp; </table>&nbsp; &nbsp; <div id="pointInfo"><div></body>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答