Сохранить данные клика по изображению в таблице js - PullRequest
Новая
       3

Сохранить данные клика по изображению в таблице js

0 голосов
/ 31 марта 2020

У меня есть код, который, когда вы нажимаете на изображение, связывает с ним точку.

Мне бы хотелось, чтобы каждый раз, когда я щелкаю, связанная точка на изображении сохранялась в таблице.

Если я добавлю 3 точки на изображение, пусть эти 3 точки будут сохранены в таблице. Потому что после этого я хотел бы иметь возможность нажимать на эти пункты, чтобы иметь возможность добавлять информацию.

Большое спасибо за вашу помощь, и извините за мой Engli sh.

Здесь мой код 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 Ответ

1 голос
/ 31 марта 2020

Вы можете попробовать код ниже: 

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