How to make each row in #list clickable

Question

Hello sorry for my english, I'm new to freemarker and Js. How can i make each row in #list clickable by id. So when its clicked it will send me to edit form for that id:

function addRowHandlers() {
     var table = document.getElementById(show);
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = function(row) {
            return function() {
                var cell = row.getElementsByTagName("td")[0];
                var id = cell.innerHTML;
                alert("id:" + id);
            };
        };
        currentRow.onclick = createClickHandler(currentRow);
    }
 }

This is my ftl list template:

<table border="1" id="tableId">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    <#list users as show>
        <tr>
            <td>${show.firstName!""}</td>
            <td>${show.lastName!""}</td>
        </tr>
    </#list>

I expect to click the row in my form and it will send me to edit page according on each id. But I cannot assign the id for each row Thanks!

Listen clicks on the table and get the link from the content of `event.target`. — Teemu, Nov 04 '19 at 07:47
@Teemu-callmewhateveryouwant can we disscus this in chat please? — Lvzerhawk, Nov 04 '19 at 07:53
I'm sorry, I've not time for an extended discussion right now (at work), but you can read about [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). Notice, that your template lacks `thead` and `tbody` elements, if possible they are worth of adding when using event delegation. — Teemu, Nov 04 '19 at 07:58

score 0 · Answer 1 · answered Nov 04 '19 at 07:54

0

you can do this by using class for each row for example

<#list users as show>
    <tr>
        <td class="abc">${show.firstName!""}</td>
        <td class="abc">${show.lastName!""}</td>
    </tr>
</#list>
$('.abc').click(function(){});

Thanks

answered Nov 04 '19 at 07:54

Bilal Ahmed

9
5

I have to to assign id for each row so that it will send me to edit page linked to exact id, but thnx – Lvzerhawk Nov 04 '19 at 08:00

score 0 · Answer 2 · answered Nov 04 '19 at 07:58

Use href to navigate to other page:

HTML:

<#list users as show>
<tr href="http://google.com">
    <td>${show.firstName!""}</td>
    <td>${show.lastName!""}</td>
</tr>

Or HTML valid version with data-href instead of href:

<#list users as show>
<tr data-href="http://google.com">
    <td>${show.firstName!""}</td>
    <td>${show.lastName!""}</td>
</tr>

How to make each row in #list clickable

2 Answers2