Dynamic Table Generation

Dynamic creation of table with DOM

You must create td and text nodes within loop. Your code creates only 2 td, so only 2 are visible. Example:

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');   

    var td1 = document.createElement('td');
    var td2 = document.createElement('td');

    var text1 = document.createTextNode('Text1');
    var text2 = document.createTextNode('Text2');

    td1.appendChild(text1);
    td2.appendChild(text2);
    tr.appendChild(td1);
    tr.appendChild(td2);

    table.appendChild(tr);
}
document.body.appendChild(table);

Blazor Server Side and dynamic table generation

If you just want a grid with something in a div of class col-4 that will give you 3 cols per row you do not need to manage the rows as bootstrap will do that for you, here is the code using image instead of object but the principle is still the same.

<h1>Testing Table</h1>
<div class="row profile-row" style="margin-left:10px">
            @foreach(var image in Images)
            {
                <div class="col-4">
                     <img src="@image" style="width:100%; padding-bottom:10px" />
                </div>
            }
        </div>

@code {

List<String> Images = new List<String>() {
        "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg",
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://thumbs.dreamstime.com/b/pineapple-headphones-wooden-table-horizontal-front-black-background-62166845.jpg" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1524293581917-878a6d017c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1354&q=80" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.unsplash.com/photo-1531219432768-9f540ce91ef3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" ,
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-sZlG6VgOM5DgG6RToxO2PPvZFml3y-L2WGJjxLIfVU4wGAN0yA&s" ,
         "https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ,
         "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
    };
}

I have put this on blazor fiddle so you can see the output https://blazorfiddle.com/s/1ptaljre

Dynamic Table name generation results in Table Not found

The Table Output step doesn't create the table, the SQL button is like a help button, it only allows you to copy the DML to create the table and paste it to wherever you want to run it, but that step doesn't run the create table order.

You'll need a separate transformation or job to create the table before inserting into it. For jobs there's an action to run SQL statements, one similar step for transformations.

Dynamic table generator with JavaScript

instead of onClick="calcDet (k,k);"> do onClick="genTable(k,k);">

then :

var k;
function readGrad() {
    k = parseInt(document.getElementById("grad").value);
    if (isNaN(k)) {
        alert('Gradul introdus nu este intreg, reintroduceti gradul matricii');
    }
}

instead of :

  <table style="text-align: center;">
        <tr id="container"></tr>
    </table>

do <div id="container"></div>

demo : http://jsfiddle.net/pYc4P/20/

.jsp dynamic table creation

It can be done without scriptlets:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:if test="${not empty request.records}">

  <table>
    <c:forEach items="${request.records}" var="record">
       <tr><td> ${record} </td></tr>
    </c:forEach>
  </table>

</c:if>

React: bind method on dynamic table generation

So, I finally figured out, why it wouldn't work. The reason is quite simple: you cannot change the context of this in arrow functions.

So instead of

function: row => {
    const remainingData = this.state.data.filter(item => item.id !== row.id);
    this.setState({ data: remainingData });
}

I used:

function(row) {
    const remainingData = this.state.data.filter(item => item.id !== row.id);
    this.setState({ data: remainingData });
}

Can whole table be dynamically created in ejs?

you can iterate over the array like you said, then iterate over each object of the array twice. First to print the headers, then to print the data

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object.

The for...in statement iterates over all enumerable properties of an object that are keyed by strings

<table>
 <% for(const obj of data){ %>
  <tr>
   <% for(const key in obj) { %>
    <th><%= key %></th>
   <% } %>
  </tr>
  <tr>
  <% for(const key in obj) { %>
   <td><%= obj[key] %></td>
  <% } %>
  </tr>
 <% } %> 
</table>

Dynamic table generation in jQuery

function showTable(trnum) {
    var tableCode = "<table>";
    for (var i=0; i<trnum; i++) {
        tableCode += "<tr>" + "stuff inside each tr ?" + "</tr>";
    }
    tableCode += "</table>";
    $("#elem").append(tableCode);
}

Razor dynamic table creation c#

aha so what you want is

item01 item11 item21

item02 item12 item22

...

You need to loop thru for rows 0-9 and decide which item appears in which column. If this is correct, then make Items an array... hope this helps...

@for(row=0; row<10; ++row){
    <tr>
    @for(col=0; col<5;++col){
        var idx = col * 10 + row;
        if(idx>=Model.items.length){
            <td> </td>
        }else{
            var itm = Model.items[col * 10 + row];
            <td>itm</td>
        }
    }
    </tr>
    }

---

Related Topics