CODEWITHSUNDEEP
javascriptjquery
NoviceCode
NoviceCode

Reputation: 15

How to append link dynamically in table row

Need to append rows with button inside a td cell. Here is my code:

$('#contact_table').find('tbody').append(
                "<tr><td>--</td><td>"+key+"</td><td>"+value+'</td><td><a cal-id=cal-clear class="badge badge-outline-secondary" href="javascript:;"><i class="ti-trash p-1"> </i> delete</a></td></tr>');

Has seen similar question of Ben Davidow, my code has similar structure but button('') not appear in a table. No error in console. Why it not working properly?

Upvotes: 0

Views: 189

Answers (2)

NoviceCode
NoviceCode

Reputation: 15

has found the issue, code this appending rows must work twice $('tr').click AND $("#add_knt" ).click, i has made changes in #add_knt and forgot to do the same to 1 case and testing only first case (uploading from ajax).

Upvotes: 0

Gaurav Mall
Gaurav Mall

Reputation: 502

I found an issue that your html string is started with double quote and ending with single quote which doesn't sums up.
Anyways, I've modified your code to use interpolation and made it more readable.

Please have a look.

const key="key";
const value="value";

$('#contact_table tbody').append(`
    <tr>
        <td>--</td>
        <td>${key}</td>
        <td>${value}</td>
        <td>
            <a cal-id=cal-clear class="badge badge-outline-secondary" href="javascript:;">
                <i class="ti-trash p-1"> </i> delete
            </a>
        </td>
    </tr>
`);

Upvotes: 1

Related Questions