Question

I have an html table like below:

<table id="tabRoom" style="border: currentColor; border-image: none; width: 950px;">
  <thead>
    <tr>
      <th class="ui-widget-header">ID</th>
      <th class="ui-widget-header">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="gridrow" onclick="editRoom(650);">
      <td class="ui-widget-content myclass" style="width: 10%;"> 
        <a style="display: inline;" href="/Config/Rooms/303">ID01</a>
      </td>
      <td>
        John Brown>
      </td>
    </tr>
  </tbody>
</table>

What I want is to prevent user direct to /Config/Rooms/303 when they click to the value of ID, but the users should see the popup coming from editRoom(). I need to use e.preventDefault() as far as I understand from what I read online, but I couldnt find the way of using it. Any help would be appreciated.

Thanks!

EDIT: Couldnt find the answer still. I am trying the code below, not working. Please help.

$(".myclass").click(
            function(event) {
            event.preventDefault();
            alert('prevented');
            }
          );

Answer 1

为了使其干净，为什么不将重定向代码放在onclick事件函数中？

<a style="display: inline;" href="#" onclick="editRoom(650); return false;">ID01</a>

JS：funciton editRoom(id){ //do Something window.href.locaiton ='/myurl'; }

Answer 2

如果你想使用jQuery：

$(window).load(function() {
    $('table a').click(function(event) {
        event.preventDefault();

        //display popup
    });
});

Answer 3

回答代码。

＆＃13;

var elements = document.getElementsByClassName("popup");
for( var i =0; i< elements.length; i++){
elements[i].addEventListener("click", function( e ){

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("popup").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", this.getAttribute("href"), true);
  xhttp.send();
  
e.preventDefault();
});
  }

＆＃13;

<a style="display: inline;" href="your_linnk_here" id="id01" class="popup">ID01</a>
<div id="popup"></div>

＆＃13;

如何对<a> in a table row

3 个答案: