giving link inside a table row using javascript

Question

I am passing values to a table from my dropdown values using JavaScript.

I need to give a link on the last row of my table. I tried the following code, but it's not working. Can anyone suggest any other idea please?

$("#btnadd").click(function(){
    var lov_name  = $("#lov_name option:selected").text();
    var lov_value = $("#lov_value").val();
    var markup    = "<tr><td>" + lov_name + "</td><td>" + lov_value + "</td><td><a href="#"> Edit</a></td></tr>";

    $("table tbody").append(markup);
    $(".alert-success").css('display','block');
});

https://stackoverflow.com/questions/171027/add-table-row-in-jquery — klugjo, Dec 18 '17 at 04:58
Is there any error or whether the row is not getting appended as last row? — kmg, Dec 18 '17 at 05:00
@Li357, this question is about what's the wrong in answer, and not how to add row in table. I think poster knows how to add row. Only problem with the code poster is trying is, wrong concatenation of strings, otherwise poster's code is working. I don't think this question is duplicate of marked question. — Kishor Pawar, Dec 18 '17 at 05:10
@Shanmugapriya Your mistake I guess is a wrong concatenation. Change your following line `var markup = "" + lov_name + "" + lov_value + " Edit";` to `var markup = "" + lov_name + "" + lov_value + " Edit";` > Look at the quotes in `href`. — Kishor Pawar, Dec 18 '17 at 05:11

score 0 · Accepted Answer · answered Dec 18 '17 at 05:20

Change var markup = "<tr><td>" + lov_name + "</td><td>" + lov_value + "</td><td><a href="#"> Edit</a></td></tr>";

to

var markup = "<tr><td>" + lov_name + "</td><td>" + lov_value + "</td><td><a href='#'> Edit</a></td></tr>";

note the quotes in a href='#'

$("#btnadd").on('click',function(){
    var lov_name  = $("#lov_name option:selected").text();
    var lov_value = $("#lov_value").val();
    var markup    = "<tr><td>" + lov_name + "</td><td>" + lov_value + "</td><td><a href='#'> Edit</a></td></tr>";

    $("table tbody").append(markup);
    $(".alert-success").css('display','block');   
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="lov_name">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" id="lov_value">Three</option>
</select>
<button id="btnadd">Add row</button>
<span class="alert-success" style="display: none;"></span>
<table>
 <tbody>
 </tbody>
</table>

giving link inside a table row using javascript

1 Answers1