Is it possible to dynamically put a string in a cell of table using JavaScript?
Application Type
Traditional Web

I want to dynamically put a string in the designated cell in table with Javascript.

For example, if I have this kind of condition of local variables,

rowNum=3, colNum=2, Label="StringSTR"      (rowNum means the row, colNum means the column.)

the string of "Label" is inserted into the designated cell and it displays.



I implemented it but it doesn't work like the below image and I can not figure out where I'm missing.



The code in Run Javascript is like this.

"
var tableElem = document.getElementById('tablematrix');
var rowElems = tableElem.rows;
var rowlen = rowElems.length;
var rownum,colnum;

rownum=" + rowNum + ";
colnum=" + colNum + ";

rownum=rownum+1;
colnum=colnum+2;

var colthis=rowElems[rownum].cells[colnum];

colthis.innerHTML+=" + Label + ";

"



I wonder if I have the wrong Javascript coding. Is it possible to make this kind of function with JavaScript to insert a value into a cell in OutSystems?

I'd appreciate it if you could give me some good advice.

I have attached my oml file for your information.


I look forward to your comments.

Best,

MATRIXcell.oml

mvp_badge
MVP
Solution

Hi Tsubasa, 

I have implemented the use case by using the below-mentioned JS code. 

Note: I have defined a generic function (in the screen JavaScript section) to set value to the desired cell.

JS Snippet:

const setValueToCell = (rownum, colnum, label) => {
    
        var tableElem = document.querySelector('.tablematrix');

        const rows = tableElem.tBodies[0].querySelectorAll('tr');
        const colsLength = tableElem.tBodies[0].querySelectorAll('tr')[1].querySelectorAll('td');

        if (rownum > 0 && rownum < rows.length && colnum > 0 && colnum < colsLength.length)
            rows[rownum].querySelectorAll('td')[colnum + 1].textContent = label;
        else 
            alert(`Invalid col[${colnum}] row[${rownum}] selection`);
}

See this demo screen PutInMatrix

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

MATRIXcell.oml

Thank you.

I was able to make what I want happen thanks to you.

I understood my mistakes.

That helped me.

Best,

Hi Tsubasa,

If you inspect the source code of the table in browser, you'll see that a different Id is assigned to the table each time it is published. So, you cannot really hard-code the Id of the table into JS, as it is dynamic. 



Moreover, you used getElementById in the code, but you passed table's class (tablematrix) as a parameter.

If you just change the JS function you use to getElementsByClassName, and then grab the first item off the resulting node list, it should work fine:

var tableElem = document.getElementsByClassName('tablematrix')[0];


Or, you can give a name to the table (say, table_matrix) and get its dynamic Id like the following:

var tableElem = document.getElementById('" + table_matrix.Id + "');

Also, I see missing single quotes on the last line of your JS code; it will not be able to render the value of the Label. It should work fine if you correct it to:

colthis.innerHTML+='" + Label + "';


Regards

Thanks.

As your advice, I gave a name to the table (say, table_matrix) and revised  the code to

var tableElem = document.getElementById('" + table_matrix.Id + "');


but, I am having this "undifined" error.


All the Javascript code should be correct. I actually have checked in code editor.


I want to display the value of string on a screen like this.



Do you have any ideas where is wrong?

Hi Tsubasa,

I'm not sure where it went wrong with your code, but you can check what I did in the oml.

MatrixTable.oml

mvp_badge
MVP
Solution

Hi Tsubasa, 

I have implemented the use case by using the below-mentioned JS code. 

Note: I have defined a generic function (in the screen JavaScript section) to set value to the desired cell.

JS Snippet:

const setValueToCell = (rownum, colnum, label) => {
    
        var tableElem = document.querySelector('.tablematrix');

        const rows = tableElem.tBodies[0].querySelectorAll('tr');
        const colsLength = tableElem.tBodies[0].querySelectorAll('tr')[1].querySelectorAll('td');

        if (rownum > 0 && rownum < rows.length && colnum > 0 && colnum < colsLength.length)
            rows[rownum].querySelectorAll('td')[colnum + 1].textContent = label;
        else 
            alert(`Invalid col[${colnum}] row[${rownum}] selection`);
}

See this demo screen PutInMatrix

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

MATRIXcell.oml

Thank you.

I was able to make what I want happen thanks to you.

I understood my mistakes.

That helped me.

Best,

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.