HTML noob table htmlizer

Lemonade

Lemonade

WOOPAGGING
is a Site Content Manager Alumnusis a Team Rater Alumnusis a Social Media Contributor Alumnusis an Artist Alumnusis a Forum Moderator Alumnusis a Top Contributor Alumnusis a Smogon Media Contributor Alumnus
Hello, I didn't really feel like studying for finals so I made this little thing that htmlizes the main parts of a table for you, given it is in the "element one / 2 / 3 / 4 / etc." format, which is what is usually in Smogon articles IE speed tiers. Note I don't have much programming instruction, so there are sloppy parts and probably inefficient ways of doing things, I just went with the most intuitive.

https://dl.dropboxusercontent.com/s/sma3uiw22tkt8nd/TableMakerOnline.html

Save this as an .html file. You will later open this file in your friendly neighborhood web browser hopefully not named Internet Explorer.
HTML: 
<!DOCTYPE html>
<html>
<body>

<h1>Noob Table Maker by V0x</h1>

<h2>Input Here</h2>
<textarea id="inputBox" rows = "10" cols = "75"></textarea>

<br />

<button type="button" onclick="actualButton()">Tablize</button>

<br />

<h2>Output Here</h2>
<textarea id="outputText" rows = "25" cols = "50">Output</textarea>

<script src="testScriptVer2.js"></script>
</body>
</html>
and this as testScriptVer2.js in the same folder

Code: 
//ver 2: do linebreaks
function actualButton()
{

    inputText = document.getElementById("inputBox").value;
    numberOfLineBreaks = (inputText.match(/\n/g)||[]).length;

    helloInputText = inputText.replace(/\n/g,"*");

    var LineStore = new Array();
    lineBreakIndex = 0;
    for (i = 1; i <= numberOfLineBreaks; i++)
    {
        LineStore[i-1] = helloInputText.substring(lineBreakIndex,helloInputText.indexOf("*",lineBreakIndex+1));
        lineBreakIndex = helloInputText.indexOf("*",lineBreakIndex+1);
    }
    LineStore[numberOfLineBreaks] = helloInputText.substring(lineBreakIndex,helloInputText.length);


    //________________successfully parses each line break into element of the array_________________
    //document.getElementById("lineOutput").innerHTML = LineStore.toString().replace(/\*/g,"");

    //lineInputText = LineStore[1].toString().replace(/\*/g,"");

    var tableStore = new Array();
    var interOutputString = new Array();
    var finalArray = new Array();
    for (k = 0; k < LineStore.length; k++)
    {

    lineInputText = LineStore[k].toString().replace(/\*/g,""); //maybe remove space


    numberOfSlash = (lineInputText.match(/\//g)||[]).length;
    slashIndex = 0;




    for (i = 1; i <= numberOfSlash; i++)
    {
        tableStore[i-1] = lineInputText.substring(slashIndex,lineInputText.indexOf("/",slashIndex+1)-1).replace("/ ","");
        slashIndex = lineInputText.indexOf("/",slashIndex+1);

    }
    tableStore[numberOfSlash] = lineInputText.substring(slashIndex+2,lineInputText.length);


    outputString = "";

    for (j = 0; j < tableStore.length; j++)
    {
        interOutputString = tableStore[j];
        outputString = outputString + "<td>" + interOutputString + "</td> \n";
        finalArray[k] = outputString;
        //"<table><tr><td>"  + "</td></tr></table>"
    }
    }
 
    finaloutput = "";
    for (a = 0; a < finalArray.length; a++)
    {
        preTableRow = finalArray[a];
        finaloutput = finaloutput + "<tr> \n" + preTableRow + "</tr> \n";
    }

    document.getElementById("outputText").innerHTML = finaloutput;
    //document.getElementById("outputText").innerHTML = "<tr> \n" + outputString + "</tr>"; //numberOfSlash.toString()+ ", " + slashIndex.toString();
    //document.getElementById("otherOutput").innerHTML = "<table border='1'><tr>" + outputString + "</tr></table>"; //numberOfSlash.toString()+ ", " + slashIndex.toString();

}


Here is an example from the LC speed tiers article, which is what made me think to write this in the first place.

This:
32 / Tangela / 60 / + Speed / 196 / +2
... / Kabuto / 55 / + Speed / 236 / +2
30 / Elekid, Yanma / 95 / + Speed / 236 / +1
... / Horsea, Tangela / 60 / Neutral / 196 / +2
... / Cranidos / 58 / Neutral / 212 / +2
... / Venipede / 57 / Neutral / 220 / +2
... / Dwebble, Kabuto / 55 / Neutral / 236 / +2
28 / Elekid, Yanma / 95 / Neutral / 236 / +1
... / Murkrow / 91 / + Speed / 188 / +1
... / Misdreavus, Taillow / 85 / + Speed / 236 / +1
... / Binacle, Dratini, Mantyke / 50 / Neutral / 196 / +2
... / Swirlix / 49 / Neutral / 204 / +2
... / Bellsprout, Exeggcute, Shellder / 40 / + Speed / 196 / +2
... / Cherubi, Golett, Omanyte / 35 / + Speed / 236 / +2
27 / Murkrow / 91 / Neutral / 188 / +1
... / Misdreavus, Taillow / 85 / Neutral / 236 / +1
26 / Bellsprout, Exeggcute, Shellder / 40 / Neutral / 196 / +2
... / Cherubi, Golett, Omanyte / 35 / Neutral / 236 / +2
... / Clamperl / 32 / + Speed / 180 / +2
... / Aron, Oddish, Petilil / 30 / + Speed / 196 / +2
... / Rhyhorn / 25 / + Speed / 236 / +2

Becomes:
HTML: 
<tr>
<td>32</td>
<td>Tangela</td>
<td>60</td>
<td>+ Speed</td>
<td>196</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Kabuto</td>
<td>55</td>
<td>+ Speed</td>
<td>236</td>
<td>+2</td>
</tr>
<tr>
<td>30</td>
<td>Elekid, Yanma</td>
<td>95</td>
<td>+ Speed</td>
<td>236</td>
<td>+1</td>
</tr>
<tr>
<td>...</td>
<td>Horsea, Tangela</td>
<td>60</td>
<td>Neutral</td>
<td>196</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Cranidos</td>
<td>58</td>
<td>Neutral</td>
<td>212</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Venipede</td>
<td>57</td>
<td>Neutral</td>
<td>220</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Dwebble, Kabuto</td>
<td>55</td>
<td>Neutral</td>
<td>236</td>
<td>+2</td>
</tr>
<tr>
<td>28</td>
<td>Elekid, Yanma</td>
<td>95</td>
<td>Neutral</td>
<td>236</td>
<td>+1</td>
</tr>
<tr>
<td>...</td>
<td>Murkrow</td>
<td>91</td>
<td>+ Speed</td>
<td>188</td>
<td>+1</td>
</tr>
<tr>
<td>...</td>
<td>Misdreavus, Taillow</td>
<td>85</td>
<td>+ Speed</td>
<td>236</td>
<td>+1</td>
</tr>
<tr>
<td>...</td>
<td>Binacle, Dratini, Mantyke</td>
<td>50</td>
<td>Neutral</td>
<td>196</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Swirlix</td>
<td>49</td>
<td>Neutral</td>
<td>204</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Bellsprout, Exeggcute, Shellder</td>
<td>40</td>
<td>+ Speed</td>
<td>196</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Cherubi, Golett, Omanyte</td>
<td>35</td>
<td>+ Speed</td>
<td>236</td>
<td>+2</td>
</tr>
<tr>
<td>27</td>
<td>Murkrow</td>
<td>91</td>
<td>Neutral</td>
<td>188</td>
<td>+1</td>
</tr>
<tr>
<td>...</td>
<td>Misdreavus, Taillow</td>
<td>85</td>
<td>Neutral</td>
<td>236</td>
<td>+1</td>
</tr>
<tr>
<td>26</td>
<td>Bellsprout, Exeggcute, Shellder</td>
<td>40</td>
<td>Neutral</td>
<td>196</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Cherubi, Golett, Omanyte</td>
<td>35</td>
<td>Neutral</td>
<td>236</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Clamperl</td>
<td>32</td>
<td>+ Speed</td>
<td>180</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Aron, Oddish, Petilil</td>
<td>30</td>
<td>+ Speed</td>
<td>196</td>
<td>+2</td>
</tr>
<tr>
<td>...</td>
<td>Rhyhorn</td>
<td>25</td>
<td>+ Speed</td>
<td>236</td>
<td>+2</td>
</tr>


Here are some limitations:
  • The last row you input cannot have a line break after it
  • The rows cannot have "*"s in them
  • The cells must be separated by "/"s with spaces on either side, though it is fairly easy to make anything not in the format into this format (ie find and replace in Word, etc.)
If there's more stuff post below etc.
 
Last edited:
You must log in or register to reply here.

Users Who Are Viewing This Thread (Users: 1, Guests: 0)

  • ... and 1 more.
    • Top