CODEWITHSUNDEEP
javascriptjqueryhtml
ksup
ksup

Reputation: 61

dynamically add elements attributes

I am creating dynamic accordion elements with a table inside the accordion content. I need to set text dynamically via variables that are passed to the function.

My code:

function addAcc(marking, freq) {
    var newID = marking;

    var newTable = '<div id="startID"> \
                    <h3>\
                    </h3> \
                    <table class="tg" style="width: 100%; height: 100%;padding: 0 0 0 0; margin: 0 0 0 0;background-color:  #A0A6AB"> \
                    <tr> \
                    <th id="frequency"></th> \
                    <th></th> \
                    <th></th> \
                    <th></th> \
                    </tr> \
                    </table> \
                    </div>';

    $('.emitters').append(newTable)
    $('.emitters').accordion("refresh");
    $('#startID').attr('id',newID);
}

for Instance I need to set the element frequency with a text value of the freq variable received when the function is called. one more issue is to set the main div ID dynamically with the marking string that is passed to the function. How can those be set when the HTML code is a javascript variable?

Upvotes: 0

Views: 66

Answers (2)

kedar kamthe
kedar kamthe

Reputation: 8178

Can you please replace your function with below code to get expected output

function addAcc(marking, freq) {
var newID = marking;

var newTable = '<div id="'+marking+'"> \
                <h3>\
                </h3> \
                <table class="tg" style="width: 100%; height: 100%;padding: 0 0 0 0; margin: 0 0 0 0;background-color:  #A0A6AB"> \
                <caption>'+freq+'</caption>\
                <tr> \
                <th id="frequency"></th> \
                <th></th> \
                <th></th> \
                <th></th> \
                </tr> \
                </table> \
                </div>';

$('.emitters').append(newTable)
$('.emitters').accordion("refresh");
$('#startID').attr('id',newID);

}

Upvotes: 1

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

You can concatenate the strings to set variables for your HTML code. For instance:

var newTable = '<div id="startID"> \
            <h3>\
            </h3> \
            <table class="tg" style="width: 100%; height: 100%;padding: 0 0 0 0; margin: 0 0 0 0;background-color:  #A0A6AB"> \
            <tr> \
            <th id=';

var frequency = freq;

var newTable2 = '></th> \
            <th></th> \
            <th></th> \
            <th></th> \
            </tr> \
            </table> \
            </div>';

And then:

$('.emitters').append(newTable + frequency + newTable2)

Upvotes: 1

Related Questions