Использование JQuery вместо функций для доступа к данным из таблицы

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> 

Обычно, мы просто имеем следующую функцию, чтобы сделать что-то с данными, который изменяется по строкам (как правило, передавая идентификатор, но иногда может быть куча аргументов в функция). Эта функция может делать разнообразие для вещей - не только эти примеры, конечно.

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 }); 
} 

ИЛИ

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-», но проблема в том, как вы действительно получаете значение при наличии нескольких строк? Я не могу использовать идентификатор, поскольку он уникален, и если я добавил класс, как мне получить доступ к данным из этого вызова?

Любая помощь будет принята с благодарностью, спасибо!

UPDATE

Это работало как ответ на мой sitaution. Спасибо @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> 

Вам не нужно идентификатор и имя отдельно в вашем коде, вы использовали их в 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(); 

... или с использованием атрибутов предназначенные для конкретных данных, которые вы используете (если они существуют) были бы лучше.

Answer 2

<table> 
<tr><td id='one'>edit</td></tr> 
</table> 

<script> 
$("#one").click(function(){ 
    //do your stuff here 
}); 
</script>