锚元素在DOM中移动

时间:2018-07-10 23:09:03

标签: html dom anchor element

我的来源如下:

<html>
<head>
<title>Southwest Pumps: Fire Pump Sales and Services</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/3fe3352e0f.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat"     rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
</head>
<body>
<div class="container">
<a class="btn btn-xs btn-primary" href="/sales/new">Create New Job Entry</a>
<table class="table table-striped table-dark">
<thead>
<tr>
<th>Customer Name</th>
<th>Job Name</th>
<th>Last Edited</th>
<th>Editor</th>
<th>Link to Job</th>
</tr>
</thead>
<tbody id="tbody">
<a style="display:block" href="/sales/5b428cd7b87ffb0aa03c94f2">
<tr>
<td>Customer</td>
<td>Job</td>
<td><input type="hidden" id="inputdate0" value="Tue Jul 10 2018 21:21:47     GMT+0000 (UTC)"></input></td>
<td>LeslieSmooth</td>
<td><a class="btn btn-xs btn-primary"     href="/sales/5b428cd7b87ffb0aa03c94f2">Link</a></td>
</tr>
</a>
<a style="display:block" href="/sales/5b429ff7b87ffb0aa03c94f6">
<td>Customer</td>
<td>Job</td>
<td><input type="hidden" id="inputdate1" value="Tue Jul 10 2018 21:22:27     GMT+0000 (UTC)"></input></td>
<td>LeslieSmooth</td>
<td><a class="btn btn-xs btn-primary"     href="/sales/5b429ff7b87ffb0aa03c94f6">Link</a></td>
</tr>
</a>
<a style="display:block" href="/sales/5b42b24eb87ffb0aa03c94f8">
<tr>
<td>Customer</td>
<td>Job</td>
<td><input type="hidden" id="inputdate2" value="Tue Jul 10 2018 21:23:40     GMT+0000 (UTC)"></input></td>
<td>LeslieSmooth</td>
<td><a class="btn btn-xs btn-primary"     href="/sales/5b42b24eb87ffb0aa03c94f8">Link</a></td></tr>
</a>
<a style="display:block" href="/sales/5b44f07d7945fe0e5388efd6">
<tr>
<td>Customer</td>
<td>Job</td>
<td><input type="hidden" id="inputdate3" value="Tue Jul 10 2018 21:30:46     GMT+0000 (UTC)"></input></td>
<td>LeslieSmooth</td>
<td><a class="btn btn-xs btn-primary"     href="/sales/5b44f07d7945fe0e5388efd6">Link</a></td>
</tr>
</a>
<a style="display:block" href="/sales/5b43b048601191087dc0b618">
<tr>
<td>Customer</td>
<td>Job</td>
<td><input type="hidden" id="inputdate4" value="Tue Jul 10 2018 21:33:22     GMT+0000 (UTC)"></input></td>
<td>LeslieSmooth</td>
<td><a class="btn btn-xs btn-primary"     href="/sales/5b43b048601191087dc0b618">Link</a></td>
</tr>
</a>
<a style="display:block" href="/sales/5b44bc6b7945fe0e5388efd2">
<tr>
<td>Customer</td>
<td>Job</td>
<td><input type="hidden" id="inputdate5" value="Mon Jul 09 2018 18:58:16     GMT+0000 (UTC)"></input></td>
<td>LeslieSmooth</td>
<td><a class="btn btn-xs btn-primary"     href="/sales/5b44bc6b7945fe0e5388efd2">Link</a></td>
</tr>
</a>
<a style="display:block" href="/sales/5b450a6c7945fe0e5388efd8">
<tr>
<td>Customer</td>
<td>Job</td>
<td><input type="hidden" id="inputdate6" value="Tue Jul 10 2018 21:33:34     GMT+0000 (UTC)"></input></td>
<td>LeslieSmooth</td>
<td><a class="btn btn-xs btn-primary"     href="/sales/5b450a6c7945fe0e5388efd8">Link</a></td>
</tr>
</a>
</tbody>
</table>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-    hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>
<!-- Genaric Scripts -->
<script type="text/javascript" src="/scripts/script.js"></script> 
</body>
</html>

但是DOM将我所有的锚元素移到TABLE上方,由于某种原因,它最终看起来像这样。

我的目标是使表的整个行成为链接到特定数据库ID的锚元素。我对发生的事情一无所知。任何帮助表示赞赏!

...<div class="container">
<a class="btn btn-xs btn-primary" href="/sales/new">Create New Job Entry</a>
<a style="display:block" href="/sales/5b428cd7b87ffb0aa03c94f2"></a>
<a style="display:block" href="/sales/5b429ff7b87ffb0aa03c94f6"></a>
<a style="display:block" href="/sales/5b42b24eb87ffb0aa03c94f8"></a>
<a style="display:block" href="/sales/5b44f07d7945fe0e5388efd6"></a>
<a style="display:block" href="/sales/5b43b048601191087dc0b618"></a>
<a style="display:block" href="/sales/5b44bc6b7945fe0e5388efd2"></a>
<a style="display:block" href="/sales/5b450a6c7945fe0e5388efd8"></a>
<table class="table table-striped table-dark">
<thead>
<tr>
<th>Customer Name</th>
<th>Job Name</th>
<th>Last Edited</th>
<th>Editor</th>
<th>Link to Job</th>
</tr>
</thead>
<tbody id="tbody">
<tr>...

我正在使用Bootstrap。而且我正在使用NodeJS / Express和EJS生成锚标记。

JIC我的EJS代码如下:

...<div class="container">
<a class="btn btn-xs btn-primary" href="/sales/new">Create New Job Entry</a>
<table class="table table-striped table-dark">
<thead>
<tr>
<th>Customer Name</th>
<th>Job Name</th>
<th>Last Edited</th>
<th>Editor</th>
<th>Link to Job</th>
</tr>
</thead>
<tbody id="tbody">
<% for (var i = 0; i < jobs.length; i++) { %>
<a href="/sales/<%= jobs[i]._id %>" style="display: block;">
<tr>
<td><%= jobs[i].customer %></td>
<td><%= jobs[i].name %></td>
<td><input type="hidden" id="inputdate<%= [i] %>" value="<%=     jobs[i].lastEdited %>"></input><span class="date-class" id="spandate<%= [i] %>">    </span></td>
<td><%= jobs[i].editors[jobs[i].editors.length - 1].username %></td>
<td><a class="btn btn-xs btn-primary" href="/sales/<%= jobs[i]._id     %>">Link</a></td>
</tr>
</a>
<% } %>
</tbody>
</table>
</div>...

0 个答案:

没有答案