javascript - 获取 anchor 标签的动态值

Question

注意:我已发布以下内容作为对其中一个问题( Get the value of the dynamic anchor tag and pass it to the next page )的回答，但存在一个故障。于是又发了一遍。这不是任何现有线程的重复

我想使用 Tornado、html、javascript 实现以下目标 -

单击链接( anchor 标记)时，{它具有动态生成的值 - {{d[0]}} ，来自 MySQL 数据库 (id)。}，我应该能够获取 id 值(例如100) 并将其发送到 Tornado Controller 并使用逻辑提取与该 ID 相关的所有详细信息。

id -------- 注意

100 ----- 100 的注释

101 ----- 关于101的说明

第 1 步 -

a href =“TornadoHandlerPath”

将作为默认的 Get 方法发送它，但我希望使用 Post 方法发送它。

所以我点击了这个链接 - http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

包含方法发布到表单。所以我的新 anchor 标签看起来像这样

  a href="javascript: submitForm()" id="id" name="id">
                                   {{d[0]}}  </a>

第 2 步 - 我在 html 中的 anchor 标记上方添加了一个隐藏字段

  <input type="hidden" name="cid" id="cid">

在 JavaScript 函数中，我获取了 id 的值并将其分配给隐藏字段。

因此，当提交表单时，ID 将与 post 请求一起发送。

function submitForm() {
var id = $("#id").html();        
var hidden = document.getElementById("cid");
hidden.value = id;
var form = document.getElementById("form"); 
form.submit();

}

在 Tornado Handler 中，我用 self.get_argument("cid") 捕获了它，并继续逻辑实现。

此方法存在故障。即使我点击不同的 id(例如 103)，它仍然只显示 id 100 的详细信息!这是因为我正在根据 id 提取数据。并且所有行都有相同的 id。

我尝试使用

var id = $(this).closest('td').html(), but it dint work.

完整的代码在这里 -

$('.alink').on('click', function() {

var id = $(this).closest('td').html();

var hidden = document.getElementById("cid");
hidden.value = id;
var form = document.getElementById("form"); 
form.submit();
});

HTML

<td>
<form name="form" id="ft" action="/TornadoHandler" method="Post">
<input type="hidden" name="cid" id="cid">                                         
<a href="javascript: submitForm()" class="alink" id="id" name="id"> {{d[0]}} </a>
</form>
</td>

我被困在这里很长时间了。请帮助我!!

Answer 1

您可以使用数据属性来移动数据。不需要隐藏字段，只需将其直接放在 anchor 标记上

function submitForm(thelink){  alert(thelink.getAttribute('data-info'));
      
}

<a href=""onclick="javascript: submitForm(this)" data-info="hello from data attribute 1"class="alink" id="configid" name="configid"> 1 </a>
<a href=""onclick="javascript: submitForm(this)" data-info="hello from data attribute 2"class="alink" id="configid" name="configid"> 2 </a>
<a href=""onclick="javascript: submitForm(this)" data-info="hello from data attribute 3"class="alink" id="configid" name="configid"> 3 </a>