Table using a tag and spans

Question

I am building a table using css and a combination of <a> tags with <span>s something like :

<a class='header'>
  <span>User ID</span>
  <span>Name</span>
  <span></span>
</a>
<a href='somesite.php'>
  <span>7</span>
  <span>Ofek</span>
  <span><button type="button" onclick="somefunc()">Add to Favourites</button></span>
</a>

the results looks something like that :

enter image description here

Now my problem is that when i click the button i still get redirected to somesite.php, and the function somefunc() never gets called, i seen somewhere that a button cant be nested inside a span, so whats the alternative to make this work? i want that whenever user click on the line it will redirected him to somesite.php, but not when he presses the button, then i only want the func somefunc() to be called.

You are allowed to use tables for tables by the way – there is 0 reason to replace a table with a hacked together version. The "don't use tables" mantra is only for layout, not for tabular data. — Rich Bradshaw, Oct 06 '13 at 17:39
Also, you tagged this with jQuery, but didn't actually use it. Instead of onclick use `$('button').on('click', function(e) {e.preventDefault; somefunc(); } ) ;` — Rich Bradshaw, Oct 06 '13 at 17:40
@BeNdErR: Why must every JS question on this site have a "fiddle"? (Which is a meaningless request to someone who's never heard of jsfiddle.net.) — user2736012, Oct 06 '13 at 17:42
@t.niese yes if you click the row but not the button then it should redirect you to the href — Ofek Ron, Oct 06 '13 at 17:44
@user2736012 it helps who wants to understand / answer the question. — BeNdErR, Oct 06 '13 at 17:46
@BeNdErR: What specifically did you not understand about the question? If something was unclear to you, you should ask that OP clarify it. If you just want to play with a demo, then you should make one for yourself. — user2736012, Oct 06 '13 at 17:52
@user2736012 that's the point. The question was clear, a fiddle would be useful 1) because it IS useful for me/who wants to help, 2) I think is fine to provide as much examples/demo as possible when asking a question. This will raise the probability to get an answer, in my opinion. cheers — BeNdErR, Oct 06 '13 at 17:56
@BeNdErR: Right. The question had no need for it. It was *you* that needed/wanted it. So if you want one, make one. Cheers. — user2736012, Oct 06 '13 at 17:59
@user2736012 We have a different opinion about that, no problem for me. — BeNdErR, Oct 06 '13 at 18:01

score 3 · Accepted Answer · answered Oct 06 '13 at 18:18

Nesting a button element in an a element creates problems in handling events, and it is forbidden in HTML5 CR.

The simple way to avoid creating the problem is to separate the interactive elements:

<a href='somesite.php'>
  <span>7</span>
  <span>Ofek</span>
</a>
  <span><button type="button" onclick="somefunc()">Add to Favourites</button></span>

This would not be possible (as such) in the logical approach where you use table markup, but it’s simple if you are simulating a table with CSS so that cells are span elements (or, generally, phrase/inline/text-level elements).

score 1 · Answer 2 · edited May 23 '17 at 12:01

1

Just add return false to your somefunc() code:

function someFunc () {
    // your existent code
    return false;
}

and in HTML onclick="return somefunc()". But I also recommend to not use onclick HTML attributes but to use:

$("button").on("click", function (e) {
    e.preventDefault;
    somefunc();
    return false;
});

Read about this topic here.

edited May 23 '17 at 12:01

Community

1
1

answered Oct 06 '13 at 17:41

Ionică Bizău

109,027
88
289
474

1

@OfekRon: You also need to add `return` to your `onclick`. `onclick="return somefunc()"` – user2736012 Oct 06 '13 at 17:47
@user2736012 doesnt work still, the function never gets called – Ofek Ron Oct 06 '13 at 17:48
@user2736012 yes it works, see this fiddle http://jsfiddle.net/A3DEq/1/. that's why fiddles are useful. – BeNdErR Oct 06 '13 at 17:49
@OfekRon Thanks. I don't use to use `onclick` attributes. Updated my answer. It should work... – Ionică Bizău Oct 06 '13 at 17:50
@BeNdErR: Your demo fails. I was talking about the question, which is very clear, and needs no demo to explain the issue. – user2736012 Oct 06 '13 at 17:50
@user2736012 updated the code, forgot to save the edits. see the new link > http://jsfiddle.net/A3DEq/1/ – BeNdErR Oct 06 '13 at 17:51
@OfekRon: If the function never gets called, then there's some other issue. Is the function globally defined? – user2736012 Oct 06 '13 at 17:53

score 0 · Answer 3 · answered Oct 06 '13 at 17:44

You can bind click event to the button then use preventDefault():

JS

function somefunc(e){
    e.preventDefault();
    alert("hey");
}
document.getElementById('abc').addEventListener(
    'click', somefunc, false
);

working fiddle

http://jsfiddle.net/KRVUv/1/

Table using a tag and spans

3 Answers3