如何用jQuery的X和Y坐标绘制一个方框？

Question

我试图按X和Y坐标绘制一个方框。但我找不到样品。我想几乎只绘制点击区域。这张照片中的例子是错误的。我只想标记点击区域。

这是错误的

必须像这样

这是我的代码：

＆＃13;

＆＃13;

$('[class^="col"]').on("click", function(e) {
		//alert("X: " + e.pageX + " Y: " + e.pageY + " Data: " + $(this).data('area'))
    $(this).position().top = e.pageX
    $(this).position().left = e.pageY
    $(this).css("border", "5px solid #00ff")
	})

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
		<div class="col-md-12" data-area="1">
			<table class="table front-table">
				<thead>
					<tr>
						<th>ID</th>
						<th>Title</th>
						<th>Content</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="ID">1</td>
						<td class="Title">Test Title</td>
						<td class="Content">Test Content</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<hr />
	<div class="row">
		<div class="col-md-4 col-md-offset-4" data-area="2">
			test
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

此剪辑无法正常工作。我该怎么办？

可理解的更新

我只想在点击区域周围画一个方框。

Answer 1

您应该获得使用e.target点击的原始元素：

$(e.target).css("border", "5px solid #00ff")