追加jQuery将HTML添加到位置绝对的下一个表格单元格

Question

我将带有jQuery的span元素附加到表分隔符（虽然这个问题更多是css / html）。

由于我开始使用position绝对值（我需要我的width属性），它现在将下一个表分隔符附加到我想要的那个。

见下文

$(document).ready(function() {
  var var1 = 2
  var element = $('td').filter(function() {
    var holidayText = $(this).contents()[0].textContent.trim();
    return parseInt(holidayText, 10) == var1;
  });
  var cell_width = element.width();

  var2 = 3;
  var width = var2 * cell_width;

  add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>');
});

div.class1 {
  position: relative;
}

table {
  border: 1px solid navy;
  width: 70%;
  text-align: center;
}

table th {
  text-align: center;
  width: 100px;
  height: 20px;
}

table td {
  width: 100px;
  height: 100px;
  vertical-align: top;
  text-align: right;
  border: 1px solid #c6c6ec;
}

span.spanclass {
  background-color: purple;
  height: 14px;
  display: inline-block;
  padding: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="class1">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

我认为追加将它放在元素中...所以我有点困惑？

我该如何解决这个问题？感谢

Answer 1

td需要position: relative;，这意味着span相对于td定位，然后span需要{{1} }和top值将它们放在left

中

td

div.class1 {
	position: relative;
}
table {
	border:1px solid navy;
	width: 70%;
	text-align: center;
}
table th {
	text-align: center;
	width:100px;
	height:20px;
}
table td {
	width: 100px;
	height: 100px;
	vertical-align: top;
	text-align: right;
	border: 1px solid #c6c6ec;
    position: relative;
}
span.spanclass {
	background-color: purple;
	height: 14px;
	display: inline-block;
	padding: 2px;
    top: 0; left: 0;
    z-index: 1;
}