Замороженная колонка HTML JavaScript - PullRequest
0 голосов
/ 27 мая 2018

Я абсолютно не знаю, как мне изменить этот код, чтобы заморозить первый столбец.Я не знаю имя класса, потому что моя таблица автоматически создается с учетом ввода моих пользователей ....

Я знаю, что должен добавить

    <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>

1 Ответ

0 голосов
/ 27 мая 2018

Чтобы исправить элемент, 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...