Need insert of mathcode in Table element

In summary, the need for inserting mathcode in a Table element is a common practice to accurately display mathematical equations and symbols in a structured and organized manner. This allows for easier understanding and readability of mathematical content within a table format. By using mathcode, users can ensure that mathematical expressions are properly formatted and rendered correctly. Additionally, mathcode can also improve accessibility for individuals using assistive technologies, making the content more inclusive.
  • #1
aheight
321
109
Hi,
I have an HTML table and would like to insert mathcode into one of the rows after the page is loaded according to external data in files I'm loading. I've included script for MathJax and I'm trying to use:

document.GetElementbyId("testInsert").innerHTML=

but cannot get it to work with something like:

document.GetElementbyId("testInsert").innerHTML=$x^2$;

And was wondering if I was doing something wrong or if someone could help me?

Below is a simple file I'm testing the code with. In my web page, I am reading a file containing a latex string for an equation and would like to then display the equation on the web page. Is this even possible? In the code below, I'm trying to insert the mathcode in the table data with id="testInsert".
JavaScript:
<!DOCTYPE html>
<html>
    <head>
             <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
//
// script for mathjax
//
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>       
       
    <script type="text/javascript">
        function webGLStart() {
   
//
// now attempt to insert math code in one of the table data elements:
//
       document.getElementById("testInsert").innerHTML=$x^2$;
     
     }

   </script>
       
    </head>
  
          
<body onload="webGLStart();">
      
    <table id="table1">

    <tr>
    <tr>
        <td id="testInsert">
            this is a taest
        </td>
    </tr>
        <td>
             <canvas id="lesson02-canvas" width="600"
            height="600" style="border:1px solid #000000;"></canvas>
        </td>
        <td class="head1" >
            <p class="heading1" > Drag to rotate.  Use mouse wheel to zoom.</p>
      
            <table id="table2"  >
               
                <tr>
                  <td class="ring1" id="checkInsert">
                     
                        Ring 1: <input type="checkbox"  id="ring1"
                                       checked="checked" name="ring1" />
                
                </tr>
               
            </table>
        </td>
           
    </tr>  
    </table>
    
    
</body>
   
  
</html>
 
Technology news on Phys.org
  • #2
aheight said:
Hi,
I have an HTML table and would like to insert mathcode into one of the rows after the page is loaded according to external data in files I'm loading. I've included script for MathJax and I'm trying to use:

document.GetElementbyId("testInsert").innerHTML=

but cannot get it to work with something like:

document.GetElementbyId("testInsert").innerHTML=$x^2$;

And was wondering if I was doing something wrong or if someone could help me?

Below is a simple file I'm testing the code with. In my web page, I am reading a file containing a latex string for an equation and would like to then display the equation on the web page. Is this even possible? In the code below, I'm trying to insert the mathcode in the table data with id="testInsert".

When you insert anything you have to be careful about how you do this. Can this be inserted as it is or it needs something that we use all the time?
 
  • #3
QuantumQuest said:
When you insert anything you have to be careful about how you do this. Can this be inserted as it is or it needs something that we use all the time?

Hi Quantum,
Thanks for replying. Did some more researching and found this at the mathjax website:

https://docs.mathjax.org/en/v2.5-latest/typeset.html

This describes how to update the math code after mathjax has rendered the page. I render the page first, read in my JSON data file with the string defining the latex code for the function, then update it as per the description above. Note that I have to add double backslashes in the latex code since a backslash is a command. Here is how I formatted the latex in Mathematica to JSON format:

Code:
"functionName":"$f(z,w)=\\frac{16}{81} e^{-\\frac{2 i \\pi }{3}} \\left(-w^2+\\frac{4}{9} e^{-\\frac{2 i \\pi }{3}}\\right)^4-\\frac{16}{81} e^{\\frac{2 i \\pi }{3}} w^4 \\left(1-\\frac{4}{9} e^{\\frac{2 i \\pi }{3}} w^2\\right)^4 z=0$"

And here is how I load the latex code from the JSON file and then update the web page with the rendered latex:

JavaScript:
function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           myArr = JSON.parse(this.responseText);
           realData=myArr.theRealData;
           imagData=myArr.theImagData;
//
// get function name here;
//
           theFunctionName=myArr.functionData.functionName;
//
// now update math code for this table field
//

       document.getElementById("functionName").innerHTML=theFunctionName;
      MathJax.Hub.Queue(["Typeset",MathJax.Hub,"functionName"]);
   
      webGLStart()
           
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
  
   
}

And here is how it looks on the web page:

https://dl.dropboxusercontent.com/s/a0jvpumfrkd9e30/index.html?dl=0
 
  • #4
aheight said:
Hi Quantum,
Thanks for replying. Did some more researching and found this at the mathjax website:

https://docs.mathjax.org/en/v2.5-latest/typeset.html

This describes how to update the math code after mathjax has rendered the page. I render the page first, read in my JSON data file with the string defining the latex code for the function, then update it as per the description above. Note that I have to add double backslashes in the latex code since a backslash is a command. Here is how I formatted the latex in Mathematica to JSON format:

And here is how I load the latex code from the JSON file and then update the web page with the rendered latex:

And here is how it looks on the web page:

https://dl.dropboxusercontent.com/s/a0jvpumfrkd9e30/index.html?dl=0

Trying to visit the above url, browser gives me warning about not safe location. Anyway, my point was about your question that ##x^2## is not inserted. This is fixed in just a simple step.
 
  • #5
QuantumQuest said:
Trying to visit the above url, browser gives me warning about not safe location. Anyway, my point was about your question that ##x^2## is not inserted. This is fixed in just a simple step.

Yes. I'm aware that message is given. Not sure why on some setups and not others. Depends on browser settings I guess.
 
  • #6
aheight said:
Yes. I'm aware that message is given. Not sure why on some setups and not others. Depends on browser settings I guess.

Yes and also to some strict MS policies, that nevertheless are proven very useful many times. But did you get my point about the answer?
 
  • #7
QuantumQuest said:
Yes and also to some strict MS policies, that nevertheless are proven very useful many times. But did you get my point about the answer?

I assume you meant the mathjax expressions I used above (and also documentation states that I could have only used one command but that would have re-rendered the whole document).

Code:
 document.getElementById("functionName").innerHTML=theFunctionName;   
  MathJax.Hub.Queue(["Typeset",MathJax.Hub,"functionName"]);

Was that not the case? Basically I'm amazed I can get even this far with the code as it's all still very new to me. :)
 
  • #8
aheight said:
I assume you meant the mathjax expressions I used above:

Was that not the case?

No. I mean how you insert something into your table cell. In the wrong way, nothing is inserted and remains "this is a taest" as is written. The right way it becomes ##x^2##.
 
  • #9
QuantumQuest said:
No. I mean how you insert something into your table cell. In the wrong way, nothing is inserted and remains "this is a taest" as is written. The right way it becomes ##x^2##.

Is not the document.getElementbyID("testfield").innerHTML=

the correct way to do this? It does seem to be working the way I coded it above.
 
  • #10
aheight said:
Is not the document.getElementbyID("testfield").innerHTML=

the correct way to do this? It does seem to be working the way I coded it above.

It is the correct way in this specific case, but in general, you have to check for cross-browser issues when you're utilizing DOM. Now, I'm trying to point you in the right direction to find the problem yourself. So, again, can the string you're trying to insert, be inserted as it is or it needs something to be added?
 
  • #11
QuantumQuest said:
It is the correct way in this specific case, but in general, you have to check for cross-browser issues when you're utilizing DOM. Now, I'm trying to point you in the right direction to find the problem yourself. So, again, can the string you're trying to insert, be inserted as it is or it needs something to be added?

Not sure what you mean. The latex string(s) I'm intending to add to my JSON files for the function I plan to completely format in Latex including the dollar signs. So for example, my JSON file would include a line:

"functionData": {
"functionName": "$\\frac{x}{y}$"
}

so then I could simply read in the entire JSON file via:

myArr = JSON.parse(this.responseText);

then update the table element in my web-page via:

document.getElementById("functionName").innerHTML=myArr.functionData.functionName;

this I assume now has the completely-formatted latex command in the table element now so that I can then re-render just this field:

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"functionName"]);

Is there a better way to do this?
 
  • #12
aheight said:
Not sure what you mean. The latex string(s) I'm intending to add to my JSON files for the function I plan to completely format in Latex including the dollar signs. So for example, my JSON file would include a line:

"functionData": {
"functionName": "$\\frac{x}{y}$"
}

so then I could simply read in the entire JSON file via:

myArr = JSON.parse(this.responseText);

then update the table element in my web-page via:

document.getElementById("functionName").innerHTML=myArr.functionData.functionName;

this I assume now has the completely-formatted latex command in the table element now so that I can then re-render just this field:

MathJax.Hub.Queue(["Typeset",MathJax.Hub,"functionName"]);

Is there a better way to do this?

I don't talk about the way you do it. The way is OK. I just return to the code you posted in your first post. There, if you run it through your browser like it is, the string "$x^2$" is not inserted at all. So, to expand, no string can be inserted like this. Why? You must add something to this string, in order to be inserted. It is something very very common, that we all overlook at times. It has nothing to do with the libraries you include or the way you do it. It is a pure HTML matter. To help you further, there is no need to add other variables, code, special symbols and what not. In order for ##x^2## to display instead of remaining "this is a taest", one simple thing is missing from your string. There is no hint beyond these but giving you the answer. But this is no good and won't help you either. It is extremely simple to find it yourself.
 
  • #13
QuantumQuest said:
I don't talk about the way you do it. The way is OK. I just return to the code you posted in your first post. There, if you run it through your browser like it is, the string "$x^2$" is not inserted at all. So, to expand, no string can be inserted like this. Why? You must add something to this string, in order to be inserted. It is something very very common, that we all overlook at times. It has nothing to do with the libraries you include or the way you do it. It is a pure HTML matter. To help you further, there is no need to add other variables, code, special symbols and what not. In order for ##x^2## to display instead of remaining "this is a taest", one simple thing is missing from your string. There is no hint beyond these but giving you the answer. But this is no good and won't help you either. It is extremely simple to find it yourself.

Oh, I see what you mean: I needed to enclose the string in quotes like:

document.getElementById("testInsert").innerHTML="$x^2$"
 
  • #14
aheight said:
Oh, I see what you mean: I needed to enclose the string in quotes like:

document.getElementById("testInsert").innerHTML="$x^2$"

As you found the problem, I can tell you that I tested with single quotes and worked fine. Always keep in mind such issues. As a web developer, you will find them a lot of times.
 

Related to Need insert of mathcode in Table element

1. What is the purpose of inserting mathcode in a Table element?

The purpose of inserting mathcode in a Table element is to display mathematical equations or expressions in a structured and organized manner. This is particularly useful for scientific data or numerical calculations.

2. How do I insert mathcode in a Table element?

To insert mathcode in a Table element, you can use the <math> tag in HTML or the \( ... \) or \[ ... \] delimiters in LaTeX. You can also use a mathematical equation editor or manually write the mathcode using the symbols and operators provided in the ASCII or Unicode character set.

3. Can I use any type of mathcode in a Table element?

Yes, you can use a wide range of mathcode in a Table element, including basic arithmetic operations, algebraic expressions, functions, and even complex equations. However, it is important to ensure that the code is compatible with the language or platform you are using.

4. How do I ensure that the inserted mathcode is displayed correctly in a Table element?

To ensure that the inserted mathcode is displayed correctly in a Table element, you can use a WYSIWYG (What You See Is What You Get) editor or a browser extension that supports mathematical rendering, such as MathJax or KaTeX. You can also use HTML or CSS to adjust the styling and formatting of the mathcode.

5. Is it possible to insert mathcode in a Table element in a responsive manner?

Yes, it is possible to insert mathcode in a Table element in a responsive manner by using CSS media queries and setting appropriate font sizes and styles for different screen sizes. You can also use JavaScript to dynamically adjust the size and layout of the mathcode based on the device or screen resolution.

Similar threads

  • Programming and Computer Science
Replies
9
Views
4K
  • Programming and Computer Science
Replies
12
Views
3K
  • Programming and Computer Science
Replies
2
Views
909
  • Programming and Computer Science
Replies
21
Views
5K
  • Computing and Technology
Replies
3
Views
2K
  • MATLAB, Maple, Mathematica, LaTeX
Replies
3
Views
421
  • Programming and Computer Science
Replies
3
Views
2K
  • Programming and Computer Science
Replies
2
Views
5K
  • Programming and Computer Science
Replies
4
Views
2K
  • Computing and Technology
Replies
4
Views
2K
Back
Top