Question

永远，我们一直在使用javascript函数将数据从表传递到我们需要对该行数据执行的任何操作。例如，请使用此表：

<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jack</td>
            <td><a href="javascript:myfunc(1,'Jack')">edit</a></td>
        </tr>
        <tr>
            <td>Dan</td>
            <td><a href="javascript:myfunc(2, 'Dan')">edit</a></td>
        </tr>
        <tr>
            <td>Mark</td>
            <td><a href="javascript:myfunc(3, 'Mark')">edit</a></td>
        </tr>
    </tbody>
</table>

通常，我们只需要使用以下函数来处理按行更改的数据（通常传递一个id，但有时候函数中可能会有一堆args）。这个功能可以做各种事情 - 当然不仅仅是这些例子。

function myfunc(f_ID, f_Name) {
   alert(f_ID + "_" + f_Name);
   $.colorbox({ iframe: true, overlayClose: true, opacity: .70, inline: false, fixed: true, title: "Colorbox Title", href: "/mypage.asp?id=" + f_ID + "&name=" + f_Name });
}

OR

function myfunc(f_ID, f_Name) {
   if (confirm("Are you sure that you would like to permanently delete id # " + f_ID + " for " + f_Name + "?")) {
      window.location = "/mypage.asp?id=" + f_ID + "&name=" + f_Name
   }
}

我知道将Jquery和旧学校JS混合在一起可能不是最好的（也许它很好??），因此必须有更好的方法来访问这些数据。

我在想我可以使用“data-”标签，但问题是当有多行时你如何实际获得价值？我不能使用ID，因为它是唯一的，如果我添加了一个类，我如何从呼叫中访问数据？

非常感谢任何帮助，谢谢！

更新

这是我的坐标的答案。谢谢@Quentin！

<a class="testlink" href="#" data-id="1234">edit</a>

$("a.testlink").on("click", myAction);
function myAction(event) {
   event.preventDefault();
   alert($(this).data("id"));
}

Answer 1

首先：如果JS不可用，请弄清楚你想要发生什么。

普通链接可以。

<a href="/mypage.asp?id=1&amp;name=Jack">edit</a>

您不需要在代码中单独使用ID和名称，只在页面本身显示的URL中使用它们，您可以直接从链接中读取URL。

this（在事件处理程序中）引用用于触发事件的元素。

jQuery(function() {

    $("a").on("click", openColorBox);

    function openColorBox(event) {
        event.preventDefault();
        var url = this.href;
        $.colorbox({ 
            iframe: true, 
            overlayClose: true, 
            opacity: .70, 
            inline: false, 
            fixed: true, 
            title: "Colorbox Title", 
            href: url 
        });
    }

});

如果您确实需要传递其他数据，则可以通过以下方式从数据属性中读取数据：

<a href="/mypage.asp?id=1&amp;name=Jack" data-somedata="foo">edit</a>

…
function openColorBox(event) {
    event.preventDefault();
    alert( jQuery(this).data("somedata") );

...但是遍历DOM ......

var name = jQuery(this).parents("tr").find("td:first-child").text();

...或使用为您使用的特定数据（如果存在）设计的属性会更好。

使用Jquery而不是函数从表中访问数据

1 个答案: