Dynamic input table to dynamic label table in HTML Javascript

Question

I am trying to make this function I used in my program before but instead of having input fields showing the data, I need it to show labels or text with the data so I can copy and paste it in Excel.

Here is the method:

    cnt=0;
function addRowReporte(tableID,nroColumna) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    for(c=0;c<nroColumna;c++){

        var cell = row.insertCell(c);
        var element = document.createElement("input");
        element.type = "text";

        element.name = ct+"0"+c;
        element.size = "16";
        element.id = ct+"0"+c;

        cell.appendChild(element);
    }
    cnt++;
}

I tried changing the createElement("input") to label but it didn't work

The text or "value" of the field is later on called using this:

document.getElementById(id).value = rs.Fields(colu).Value;

As always, any help is greatly appreciated

As a start, could you provide a nonworking example using jsfiddle.net? — Rick Viscomi
– Rick Viscomi, Commented Mar 14, 2013 at 21:10
@RickViscomi what do u mean by a non working example? The example is working but I am populating it using a SQL query in a RecordSet and is too much code to post here or to create a jsfiddle example. I just want a short example on how to change each "input" cell to like a label cell where I can edit the value. Is that better? — randomizertech
– randomizertech, Commented Mar 14, 2013 at 21:15
@randomizertech I just mean show us what you're trying to do and how it's broken. Then we can tell you why it won't work and how to fix it. You don't need to copy your exact use case, just a short example that demonstrates your problem. — Rick Viscomi
– Rick Viscomi, Commented Mar 14, 2013 at 21:21
@RickViscomi ok, I tried doing it in jsFiddle but it didn't work for some reason so I found this example: w3schools.com/jsref/… Right now I have something like that but changing createElement("BUTTON") for INPUT and I need to make it work changing it to LABEL and then assign some sort of value to it from another function but getElementById(id) is not working with the element LABEL — randomizertech
– randomizertech, Commented Mar 14, 2013 at 21:32

Bafsky · Accepted Answer · 2013-03-14 21:17:09Z

1

You can use text nodes to insert text directly into the table cells, like so...

cnt=0;
function addRowReporte(tableID,nroColumna) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    for(c=0;c<nroColumna;c++){
        var cell = row.insertCell(c);
        var element = document.createTextNode("text goes here");

        cell.appendChild(element);
    }
    cnt++;
}

answered Mar 14, 2013 at 21:17

Bafsky

7811 gold badge7 silver badges16 bronze badges

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

6 Comments

randomizertech Over a year ago

Yes I saw this in another post too, but when I try to populate the table it does not work. See update to see how I give a value to the input field. It works perfectly fine with <input /> but not with label :(

randomizertech Over a year ago

I tried document.getElementById(id).createTextNode(rs.Fields(colu).Value); but it gave me an error saying Object doesn't support this property or method

Bafsky Over a year ago

If you want to update the value of an existing cell, you would use document.getElementById(id).innerHTML = 'whatever';

randomizertech Over a year ago

I tried that too, element.innerHTML = "<label id=101></label>" but I cannot assign a value to it from another function like I need to

Bafsky Over a year ago

I'm not sure why you're using labels, but you can set the width of the table cell like so... cell.style.width = "200px";

|

Collectives™ on Stack Overflow

Dynamic input table to dynamic label table in HTML Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related