'passing variable value to href argument

I'm sure this is an easy one but I'm really stuck here..

This is the code

                            <td id="id"></td>
                            <td id="sku"></td>
                            <td id="name"></td>
                            <td id="type"></td>
                            <td id="price"></td>
                            <td id="shipping"></td>
                            <td id="description"></td>
                            <td id="image"></td>
                            <td>
                                <a href="/update-user?id=" </a>
                            </td>
                            <td>
                                <a class="btn border delete" data-id= > </a>
                            </td>

I need to pass the value that's gonna be in the id="id" to the href id and data-id

The table is populated by this function here

var i = 0;

function next(){
    i++;
    var value = $.ajax({
        type: "get",
        url: "http://localhost:3000/api/users",
        dataType: 'json'
    }).done(function (users) {
        console.log(users[i]);
        $('#id').text(users[i]._id)
        $('#sku').text(users[i].sku)
        $('#name').text(users[i].name)
        $('#type').text(users[i].type)
        $('#price').text(users[i].price)
        $('#shipping').text(users[i].shipping)
        $('#description').text(users[i].description)
        $('#image').html("<img src='"+users[i].image+"'/>")
    });
    return value.responseJSON;
}

Many thanks everyone!

javascripthtmljqueryhtml-tablehref


Solution 1:[1]

Is this what u mean? ?

Only when there is 1 link on the page this will work, would advice you to use a class or id for the targeting. Like the way we did for .delete. Else every a href will be changed.

var i = 0;

function next(){
    i++;
    var value = $.ajax({
        type: "get",
        url: "http://localhost:3000/api/users",
        dataType: 'json'
    }).done(function (users) {
        console.log(users[i]);
        var uID = users[i]._id;
        $('#id').text(users[i]._id)
        $('#sku').text(users[i].sku)
        $('#name').text(users[i].name)
        $('#type').text(users[i].type)
        $('#price').text(users[i].price)
        $('#shipping').text(users[i].shipping)
        $('#description').text(users[i].description)
        $('#image').html("<img src='"+users[i].image+"'/>")

        $('a').attr("href", "/update-user?id="+uID)
        $('.delete').attr('data-id', uID)
    });
    return value.responseJSON;
}
                            <td id="id"></td>
                            <td id="sku"></td>
                            <td id="name"></td>
                            <td id="type"></td>
                            <td id="price"></td>
                            <td id="shipping"></td>
                            <td id="description"></td>
                            <td id="image"></td>
                            <td>
                                <a href="/update-user?id=" </a>
                            </td>
                            <td>
                                <a class="btn border delete" data-id= > </a>
                            </td>

Solution 2:[2]

Give the anchor a class.

                            <td>
                                <a class="link" href="/update-user?id=" </a>
                            </td>

then you can access it and updates its href

`$("#table tr").eq(i).find(".link").attr('href', '/update-user?id=' + users[i]._id);

You can do similarly with the data-id attribute of the delete button.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Barmar

Related Questions