0

I'm using a dynamic table (https://puravidaapps.com/table.php2) With the HTML doc, I find how to change the table form from Materializecss.com (stripered or bordered ...) at the line :

doc.getElementById("myTable").getElementsByTagName('table')[0].className = "bordered";

But I don't know how to change the differents colors. Where do I have to write "card-panel teal lighten-2" if I want to change the background color for 1 line over 2 ?(I have a css file with lots of informations but i think it's materialize.css component)

Thank you!

<!doctype html>
<head>
  <meta name="author" <content="puravidaapps.com">
  <meta charset="utf-8">
  <meta name="viewport" <content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="materialize.min.css"  media="screen,projection"/>

  <title>Table Layout</title>
</head>

<body>
  <div id="myTable"></div>
  <script>
    // if you have commas inside your text, feel free to use another delimiter, for example |
    var delimiter = ",";

    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = window.AppInventor.getWebViewString().split("\n");
    //var urlArray = location.search.slice(1).split("/n");

    var doc = document;
    var fragment = doc.createDocumentFragment();
    var thead = doc.createElement("thead");
    var tr = doc.createElement("tr");

    // split at delimiter
    var rowArray = urlArray[0].split(delimiter);

    addRow(thead, "th");
    fragment.appendChild(thead);

    var tbody = doc.createElement("tbody");
    for(i=1;iurlArray.length;i++){
      var tr = doc.createElement("tr");

      // split at delimiter
      var rowArray = urlArray[i].split(delimiter);

      tr.addEventListener ("click", function () {
        // return index (add 1 because first row is the header row)
        //window.document.title = this.rowIndex + 1;
        window.AppInventor.setWebViewString(this.rowIndex + 1);
      });

      addRow(tbody, "td");
    }
    fragment.appendChild(tbody);
    var table = doc.createElement("table");
    table.appendChild(fragment);
    doc.getElementById("myTable").appendChild(table);

    // http://stackoverflow.com/a/9236195/1545993
    doc.getElementById("myTable").getElementsByTagName('table')[0].className = "bordered";


    function addRow(dom, tag) {
      for(j=0;jrowArray.length;j++){
        var el = doc.createElement(tag);
        el.innerHTML = rowArray[j];
        tr.appendChild(el);
        dom.appendChild(tr);
      }
    }
  </script>
</body>
</html>
clement pignet
  • 105
  • 2
  • 9

1 Answers1

0

You need to use Sass in order to changes the presets css values of materialize.

In the file [_variables.scss][1] you can modify different kind of parameters, if you want to go deeper in customisation, (adding custom colors etc...) check the component folder and you will get what you want.

as .scss is not readable by your browser, you need to install sass and compile it into .css using this command line:

sass --watch scss/materialize.scss:compiled/test.css

from style folder assuming the following path:

  • app
    • style
      • scss
      • compiled

sass watch explained

mitoufle
  • 3
  • 5