实现一个移动端的table表格，有上拉加载，下拉刷新h5

要实现一个移动端的table表格，并且有上拉加载，下拉刷新的功能，你可以使用H5的一些特性，例如`<table>`标签、`<div>`标签、`<ul>`标签、`<li>`标签、CSS3动画、JavaScript等。

以下是一个使用HTML、CSS、JavaScript实现的示例代码：

HTML：

<!-- table表格容器 -->
<div id="table-container">
  <!-- 下拉刷新提示 -->
  <div class="pull-down-refresh">
    <span class="loading"></span>下拉刷新
  </div>
  <!-- table表格 -->
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody id="table-body">
      <tr>
        <td>Item 1-1</td>
        <td>Item 1-2</td>
        <td>Item 1-3</td>
      </tr>
      <tr>
        <td>Item 2-1</td>
        <td>Item 2-2</td>
        <td>Item 2-3</td>
      </tr>
      <tr>
        <td>Item 3-1</td>
        <td>Item 3-2</td>
        <td>Item 3-3</td>
      </tr>
      <!-- 省略更多的表格行 -->
    </tbody>
  </table>
  <!-- 上拉加载提示 -->
  <div class="pull-up-load">
    <span class="loading"></span>上拉加载
  </div>
</div>

CSS：

/* table表格容器样式 */
#table-container {
  height: 100%;
  overflow-y: auto;
}

/* 下拉刷新提示样式 */
.pull-down-refresh {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #888;
  position: relative;
}
.pull-down-refresh .loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #07c160;
  animation: rotate 0.6s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 上拉加载提示样式 */
.pull-up-load {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #888;
  position: relative;
}
.pull-up-load .loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #07c160;
  animation: rotate 0.6s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

JavaScript：

// 获取table表格
var table = document.querySelector('table');

// 初始化下拉刷新
var startY = 0; // 记录触摸起始位置
var isPullDown = false; // 是否正在下拉刷新
table.addEventListener('touchstart', function(event) {
  var touch = event.touches[0];
  startY = touch.pageY;
}, false);
table.addEventListener('touchmove', function(event) {
  if (isPullDown) {
    return;
  }
  var touch = event.touches[0];
  var distance = touch.pageY - startY;
  if (distance > 0 && table.scrollTop == 0) {
    // 下拉刷新
    isPullDown = true;
    var refresh = document.querySelector('.pull-down-refresh');
    var loading = refresh.querySelector('.loading');
    loading.style.display = 'inline-block';
    refresh.innerHTML = '<span class="loading"></span>正在刷新';
    // 模拟加载数据
    setTimeout(function() {
      // 插入新的表格行
      var tbody = document.querySelector('#table-body');
      var tr = document.createElement('tr');
      tr.innerHTML = '<td>New Item 1</td><td>New Item 2</td><td>New Item 3</td>';
      tbody.insertBefore(tr, tbody.firstChild);
      // 结束下拉刷新
      loading.style.display = 'none';
      refresh.innerHTML = '<span class="loading"></span>下拉刷新';
      isPullDown = false;
    }, 1000);
  }
}, false);

// 初始化上拉加载
var isPullUp = false; // 是否正在上拉加载
table.addEventListener('scroll', function(event) {
  var tbody = document.querySelector('#table-body');
  var height = tbody.offsetHeight;
  var top = table.scrollTop;
  var clientHeight = table.clientHeight;
  if (height - top - clientHeight < 50 && !isPullUp) {
    // 上拉加载
    isPullUp = true;
    var load = document.querySelector('.pull-up-load');
    var loading = load.querySelector('.loading');
    loading.style.display = 'inline-block';
    load.innerHTML = '<span class="loading"></span>正在加载';
    // 模拟加载数据
    setTimeout(function() {
      // 插入新的表格行
      var tr = document.createElement('tr');
      tr.innerHTML = '<td>New Item 1</td><td>New Item 2</td><td>New Item 3</td>';
      tbody.appendChild(tr);
      // 结束上拉加载
      loading.style.display = 'none';
      load.innerHTML = '<span class="loading"></span>上拉加载';
      isPullUp = false;
    }, 1000);
  }
}, false);

注意：这只是一个简单的示例代码，实际情况可能需要更复杂的代码来满足需求。另外，上拉加载和下拉刷新功能需要与后端API接口配合使用。