Add data from the array to the finished html table

Question

There is a usual html table of the form 4 * 4:

<table class="class_1"> <tr> <td> <div class="wrapper_1"> <!-- сюда нужно внести данные--> </div> </td> <!-- 4 ячейки --> </tr> <!-- 4 строки -->

You need to enter data from the array (below) into the table above.

 var array = ['a','b','c','d', 'e','f','g','h', 'i','j','k','l', 'm','n','o','p'];

For the usual introduction of numbers used:

 var i=1; jQuery(".wrapper_1").each(function(){ jQuery(this).append('<span>'+i+'</span>'); i++; });

How to repeat with associative array also? I repeat, you just need to add a new html element to an existing table.

Decision:

  jQuery.each(array, function(index, value){ jQuery('.wrapper_1:eq('+index+')').append('<span>'+value+'</span>'); });

and in the loop you call $("<span/>").text(i).appendTo(w);
This is similar to what I wrote above for numbers, as far as I understand it is necessary to do such a plan: /// jQuery.each (array, function (index, value) {jQuery (". Wrapper_1"). Append ('<span>' + value + '</ span>');});
array.forEach (function (el) {$ ("span />"). text (el). attachTo (w);});

user199345 · Accepted Answer · 2016-01-16T17:47:32

For your container:

 <div class="wrapper_1"></div>

Traversing a numbered array:

 var array = ['a','b','c','d', 'e','f','g','h', 'i','j','k','l', 'm','n','o','p']; array.forEach(function(el, i){ var container = document.getElementsByClassName('wrapper_1')[0]; container.innerHTML = container.innerHTML + '<span>' + el + '</span>, '; })

Result:

 a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p,

Traversing an associative array:

 var array2 = {'a':'element a', 'b':'element b', 'c':'element c'}; for(var key in array2){ var container = document.getElementsByClassName('wrapper_1')[0]; container.innerHTML = container.innerHTML + '<span>' + array2[key] + '</span>, '; }

Result:

 element a, element b, element c,

I think the appeal to the element can be replaced with a selector, and use append ().

Add data from the array to the finished html table

1 answer 1

More articles: