javascript - Creating HTML structure and using functions in append -
is there way use function in jquery .append
somehow? need this:
$("<tbody>").append(function(){ (i = 0; < test1.length; i++){ test1[i] } })
why okay in case
$("<tr>").append( $("<th>").append("#"), $("<th>").append(theaders[1]), $("<th>").append("tuesday"), $("<th>").append("wednesday"), $("<th>").append("thurdsday"), $("<th>").append("friday"), $("<th>").append("saturday") )
but receive elements without "< th>" in next option:
$("<tr>").append( $.each(theaders, function(i, d){ $("<th>").append($('<th></th>').text(d)); }) )
where
var theaders = ["#", "monday", "tuesday", "wednesday", "thurdsday", "friday", "saturday"];
you use js's .map()
retrieve every value , template literal ``
wrap values in tr
tags
es6
var theaders = ["#", "monday", "tuesday", "wednesday", "thurdsday", "friday", "saturday"]; $('thead tr').append( theaders.map(val => `<th>${val}</th>`) );
th{border: 1px solid #ddd;}
<table> <thead><tr></tr></thead> </table> <script src="//code.jquery.com/jquery-3.1.0.js"></script>
or js old fashioned way:
var theaders = ["#", "monday", "tuesday", "wednesday", "thurdsday", "friday", "saturday"]; $('thead tr').append( theaders.map(function(val) { return '<th>'+ val +'</th>'; }) );
th{border: 1px solid #ddd;}
<table> <thead><tr></tr></thead> </table> <script src="//code.jquery.com/jquery-3.1.0.js"></script>
the jquery way trying use - miss sort of .map
, return
, $element construction like
var theaders = ["#", "monday", "tuesday", "wednesday", "thurdsday", "friday", "saturday"]; $("<tr/>", { append: theaders.map(function(val){ return $('<th/>', {text: val}); }), appendto: 'thead' })
th{border: 1px solid #ddd;}
<table> <thead></thead> </table> <script src="//code.jquery.com/jquery-3.1.0.js"></script>
Comments
Post a Comment