Javascript: How to add text at runtime on a variable number of labels at HTML using jQuery

Question

I have a checkbox and a label side by side in an html. Depending on the number of output returned from server side, there can be any number of checkbox and label. For example, if 5 outputs are returned from the server, there will be 5 rows (each row is 1 checkbox and 1 label).

The text to be displayed on the label is a variable and generated at runtime depending on what the database returns. Using below code, I can show 5 rows of checkbox and label. How do I update the text at id="labelFollowup" at runtime so that instead of label it shows a new text runtime?

$(function(){
  let div = '<div class ="followupSteps">'+
  '<input type="checkbox" id="checkboxFollowup">'+
  '<label for="checkboxFollowup" id="labelFollowup">label</label>'+
  '</div>';
  for(var index=0; index<5; index++)
    {
      $('table').append('<tr> <td>'+div+' </td> </tr>')
     }
});

And on the html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
</tr>
</table>

Andriy Lozynskiy · Accepted Answer · 2017-08-24 21:44:18Z

1

First of all you should make your ids for labels and inputs unique. Try this:

$(function(){
  let data = ['one','two','three','four','five'];
  for(var index=0; index<5; index++)
    {
    let div = '<div class ="followupSteps">'+
  '<input type="checkbox" id="checkboxFollowup'+index+'">'+
  '<label for="checkboxFollowup'+index+'" id="labelFollowup'+index+'">'+data[index]+'</label>'+
  '</div>';
    
    
      $('table').append('<tr> <td>'+div+' </td> </tr>')
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
</tr>
</table>

edited Aug 24, 2017 at 21:44

answered Aug 24, 2017 at 21:18

Andriy Lozynskiy

2,6142 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

nad Over a year ago

instead of hardcoding '1' here $('#labelFollowup1').text('hi');, how can I do that without hardcode, only depending on whatever the index value is?

Andriy Lozynskiy Over a year ago

@lilyhack it's just an example. I don't know where do you want to change these labels. Do you want to do it right in the loop?

nad Over a year ago

yes, however it works, I have the data available when I am in the loop. I just dont want to show those hardcoded label, need to show the data that I get from database.

Roko C. Buljan Over a year ago

@lilyhack why don't you show an example of what you're talking? You're mentioning some server outputs without showing any example.

Roko C. Buljan Over a year ago

Don't append inside for loops. Use string concatenation instead and append only once outside.

|

Eric Hodonsky · Accepted Answer · 2017-08-24 21:28:45Z

0

Try this:

$(function(){
  const div = '<div class ="followupSteps">'+
  '<input type="checkbox" id="checkboxFollowup-{{labelId}}">'+
  '<label for="checkboxFollowup" id="labelFollowup">label {{labelId}}</label>'+
  '</div>';
  const tr = '<tr> <td>'+div+'</td> </tr>';
  const rows = new Array(5).fill(tr).map((tr, index) => tr.replace(/{{labelId}}/g, index+1)).join("");
  $('table').append(rows)
});

label 1 label 2 label 3 label 4 label 5

edited Aug 24, 2017 at 21:28

answered Aug 24, 2017 at 21:22

Eric Hodonsky

5,9974 gold badges28 silver badges36 bronze badges

Collectives™ on Stack Overflow

Javascript: How to add text at runtime on a variable number of labels at HTML using jQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related