Question

我试图制作一个Material Design样式的HTML表格，到目前为止我一直在使用这个

https://codepen.io/ryanjgill/pen/ojRxXE?editors=0100

作为基础...问题是，在我的桌子上我也使用innerHTML来改变我的内容，你可以在我的.js代码上看到它：

document.getElementById（＆＃34; demo＆＃34; ？＆＃34;＆＃34;）。innerHTML =＆＃34; ？＆＃34 ;;）

List.js不会将其识别为数字（至少，我认为是......），它按字母顺序对变量进行简单排序，是否有任何可能的方法对数字进行排序而不是javascript ID？

到目前为止我所得到的：

＆＃13;

var options = {
    valueNames: ['material', 'quantity', 'price']
  },
  documentTable = new List('mdl-table', options);


$($('th.sort')[0]).trigger('click', function() {
  console.log('clicked');
});

$('input.search').on('keyup', function(e) {
  if (e.keyCode === 27) {
    $(e.currentTarget).val('');
    documentTable.search('');
  }
});

function myFunction() {
  document.getElementById("demo0").innerHTML = 10;
  document.getElementById("demo1").innerHTML = 1000;
  document.getElementById("demo2").innerHTML = 1;
  document.getElementById("demo3").innerHTML = 100;
  document.getElementById("demo4").innerHTML = 10000;
}

＆＃13;

body {
  padding: 20px;
  background: #fafafa;
  position: relative;
  overflow: hidden;
}

div.mdl-card {
  width: 440px;
  margin: 0 auto;
}

div.mdl-card__supporting-text {
  font-size: 1.2em;
}


/* Table Sorting */

input+table {
  margin-top: 1em;
}

th.sort {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-width: 75px;
}

th.sort:hover {
  cursor: pointer;
  text-decoration: none;
}

th.sort:focus {
  outline: none;
}

th.sort:after {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content: "";
  position: relative;
  top: -10px;
  right: -5px;
}

th.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  content: "";
  position: relative;
  top: 4px;
  right: -5px;
}

th.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
  content: "";
  position: relative;
  top: -4px;
  right: -5px;
}

＆＃13;

<html>

<head>
		<!-- Material Design Lite -->
		<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
		<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
		<!-- Material Design icon font -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

  <body onload="myFunction()">
    <div class="mdl-card mdl-shadow--2dp mdl-color--green-300">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">MDL-Table</h2>
      </div>
      <div class="mdl-card__supporting-text">
        Search and Sort using <a href="http://www.listjs.com/overview" class="mdl-color-text--deep-purple-700">List.js</a>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <div id="mdl-table">
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable is-upgraded is-focused">
            <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
									<i class="material-icons">search</i>
								</label>
            <div class="mdl-textfield__expandable-holder">
              <input class="mdl-textfield__input search" type="text" id="sample6">
              <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
            </div>
          </div>

          <table id='mdl-table' class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
            <thead>
              <tr>
                <th class="mdl-data-table__cell--non-numeric sort" data-sort="material">Material</th>
                <th class="sort" data-sort="quantity">Quantity</th>
                <th class="sort" data-sort="price">Unit price</th>
              </tr>
            </thead>
            <tbody class="list">
              <tr>
                <td class="mdl-data-table__cell--non-numeric material">Acrylic (Transparent)</td>
                <td class="quantity"><span id="demo4"></span></td>
                <td class="price">$2.90</td>
              </tr>
              <tr>
                <td class="mdl-data-table__cell--non-numeric material">Plywood (Birch)</td>
                <td class="quantity"><span id="demo2"></span></td>
                <td class="price">$1.25</td>
              </tr>
              <tr>
                <td class="mdl-data-table__cell--non-numeric material">Laminate (Gold on Blue)</td>
                <td class="quantity"><span id="demo1"></span></td>
                <td class="price">$2.35</td>
              </tr>
              <tr>
                <td class="mdl-data-table__cell--non-numeric material">Bamboo (Gold on Blue)</td>
                <td class="quantity"><span id="demo0"></span></td>
                <td class="price">$13.15</td>
              </tr>
              <tr>
                <td class="mdl-data-table__cell--non-numeric material">Tile (Gold on Blue)</td>
                <td class="quantity"><span id="demo3"></span></td>
                <td class="price">$5.35</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>

  </html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4579/list.min.js'></script>

</body>

</html>

＆＃13;

现在，这个问题存在一个问题：

我真的需要这个代码的jQuery吗？原始代码（第一个代码集）使用它，但没有它它似乎工作正常，检查我已经做的那个：

https://codepen.io/Mokai_Momiji/pen/OENPRz?editors=1000

感谢您的关注，我是一名初学者，而且这些东西并没有加起来，我已经进行了研究，但我无法解决。

使用list.js和innerHTML

0 个答案: