凍結列HTML JavaScript

Question

我絕對不知道該如何更改此代碼以凍結第一列。 我不知道類名，因為我的表是根據用戶輸入自動創建的。

我知道我應該加

    <style> <\style>

但是我不知道該寫些什么...

感謝您的回答

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

<body>
  <div id="myTable"></div>
  <script>

    var delimiter = ",";
    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");

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

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

    var tbody = doc.createElement("tbody");
    for(i=1;i<urlArray.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 = "striped";


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

Answer 1

要使元素固定，請position: fixed; 會像這樣幫助您：

 tr:nth-child(1) { /** <- Select the first tr tag */ background-color: red; /** <- This is just to show the effect */ position: fixed; /** <- This is to make it stay where it is */ }

 <table > <tbody> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> <tr> <td>Stuff </td> <td>Stuff </td> </tr> </tbody> </table>

凍結列HTML JavaScript

問題描述

1 個解決方案

解決方案1
0 2018-05-27 16:01:37

凍結列HTML JavaScript

問題描述

1 個解決方案

解決方案1 0 2018-05-27 16:01:37

解決方案1
0 2018-05-27 16:01:37