如何让td标签看起来像HTML中的标签？

Question

我有一些行使用ajax来获取数据，如果我使用a标记，浏览器将刷新并且一些数据将丢失。然后我只使用td标记，但我希望它看起来像a标记（颜色，光标一只手）

这是我的代码：

<td style="color: green;" onclick="myFunction(this)">hello</td>
// failed with: <td style="color: green;" onclick="myFunction(this)"><a href="">hello</a></td>

Answer 1

颜色应该按照你的方式工作。 对于光标你可以尝试

td {
    cursor: pointer;
}

Answer 2

您应该使用a，但在功能后返回false并使用#作为href值：

<a href="#" onclick="myFunction(this);return false;">hello</a>

Answer 3

虽然您可以使用cursor: pointer CSS属性执行此操作，但我更倾向于使用<a>标记并设置点击事件处理程序，如下所示：

<a id="clickable">Click</a>
<script>
document.getElementById("clickable").addEventListener('click', function(e) {
  alert("Clicked")
  e.preventDefault()
  return false
})
</script>

See a working example here

Answer 4

<td>标记实际上是<table>标记的一部分，不应在其外部使用。

你最好做的只是使用<div>元素和一些CSS创建一个新按钮

＆＃13;

＆＃13;

.button {
  display: inline-block;
  padding: 5px 12px;
  background: #09c;
  color: #eee;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid #28f;
}

＆＃13;

<div class="button">My button text</div>

＆＃13;

＆＃13;

＆＃13;

• display: inline-block导致<div>元素不占用页面的整个宽度（只包装内容）。
当悬停在元素上时，
• cursor: pointer会使光标看起来像一个指针。
• 这里没有使用表格标签更有意义，因为你没有显示表格（我可以在问题中看到）。

那就是它！

Answer 5

您可以使用以下css使td看起来像a。

td {
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;
}

td:focus, td:hover {
    color: #23527c;
    text-decoration: underline;
}