Question

我有这个html表，可以通过相应的箭头添加到该列并按列（升序或降序）进行排序。如何定位箭头，使向上箭头位于向下箭头上方，且两个箭头均位于列文本的右侧？我想同时添加相对于列文本右侧和相对于彼此的箭头。我该怎么做？

Javascript：

function add_post() {
    var table = document.getElementById("myTable"),
        elements = document.forms['myForm'].elements,
        my_values = [elements['pickup'].value, elements['delivery'].value, elements['price'].value,
                    elements['pickup-distance'].value, elements['delivery-distance'].value]

    if ((my_values.filter(x => is_not_null(x))).length == 5){
        insert_row(table, my_values)
    }
}

function insert_row(table, values){
    var row = table.insertRow(-1),
        cells = new Array(values.length)

    for (i = 0; i < values.length; i++) { 
        cells[i] = row.insertCell(i)
        cells[i].innerHTML = values[i]

    }
    reset_form()


}

function is_not_null(val){
    return val != ""
}

function reset_form(){
    document.getElementById("myForm").reset();
}

function table_to_array(){
    var tableInfo = Array.prototype.map.call(document.querySelectorAll('#myTable tr'), function(tr){
        return Array.prototype.map.call(tr.querySelectorAll('td'), function(td){
          return td.innerHTML;
          });
        });
    return tableInfo.slice(1);
}

function sort_table(i, v){
    var a = table_to_array();
    a.sort(function(a,b) {
        return a[i]-b[i]
    });
    reset_table();
    if (v == 0){
        table_from_matrix(a);
    }
    else{
        table_from_matrix(reverse_array(a))
    }
}

function reverse_array(arr){
    arr.reverse()
    return arr
}


function reset_table(){
    var x = document.getElementById("myTable").rows.length;
    for (i = 1; i < x; i++) {
        document.getElementById("myTable").deleteRow(1);
    }

}

function table_from_matrix(matrix){
    var table = document.getElementById("myTable");
    matrix.forEach(e => insert_row(table, e))

}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Courier app</title>
    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }
      body {background-color: powderblue;}
      h1 {color: red;}
      p {color: blue;}

      i {
          border: solid black;
          border-width: 0 3px 3px 0;
          display: inline-block;
          padding: 3px;
        }

        .right {
          transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
        }

        .left {
          transform: rotate(135deg);
          -webkit-transform: rotate(135deg);
        }

        .up {
          transform: rotate(-135deg);
          -webkit-transform: rotate(-135deg);
        }

        .down {
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
    </style>
  </head>
  <body>
  <table style="width:100%"
         id="myTable">
      <tr>
        <th>Pickup Address</th>
        <th>Delivery Address</th> 
        <th>Price</th>
        <th>Distance to Pickup</th>
        <th>Delivery Distance</th>
      </tr>
  </table>

  <form style="border:1px solid #ccc" id="myForm">
    <div class="container">

      <p>Please fill in this form to post a job for our drivers.</p>
      <hr>

      <label for="pickup-address"><b>Pickup Address</b></label>
      <input type="text" placeholder="Enter Address" name="pickup" required>

      <label for="delivery-address"><b>Delivery Address</b></label>
      <input type="text" placeholder="Enter Address" name="delivery" required>

      <label for="price"><b>Price</b></label>
      <input type="text" placeholder="Enter Price" name="price" required>

      <label for="distance-to-pickup"><b>Distance to Pickup</b></label>
      <input type="text" placeholder="Enter distance" name="pickup-distance" required>

      <label for="distance-to-delivery"><b>Distance to Delivery</b></label>
      <input type="text" placeholder="Enter distance" name="delivery-distance" required>

      <button onclick="add_post()" type="button">Post</button>

    </div>
  </form> 
  <i class="up" onclick="sort_table(0, 0)"></i>
  <i class="down" onclick="sort_table(0, 1)"></i>

  <i class="up" onclick="sort_table(1, 0)"></i>
  <i class="down" onclick="sort_table(1, 1)"></i>

  <i class="up" onclick="sort_table(2, 0)"></i>
  <i class="down" onclick="sort_table(2, 1)"></i>

  <i class="up" onclick="sort_table(3, 0)"></i>
  <i class="down" onclick="sort_table(3, 1)"></i>

  <i class="up" onclick="sort_table(4, 0)"></i>
  <i class="down" onclick="sort_table(4, 1)"></i>

  <script src="main.js"></script>
  </body>
</html>

Answer 1

与其尝试使箭头彼此重叠，不如将它们添加到表格标题的每一侧。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Courier app</title>
  </head>
  <body>
  <table style="width:100%"
         id="myTable">
      <tr>
        <th><i class="up" onclick="sort_table(0, 0)"></i> Pickup Address 
  <i class="down" onclick="sort_table(0, 1)"></i></th>

        <th><i class="up" onclick="sort_table(1, 0)"></i> Delivery Address
  <i class="down" onclick="sort_table(1, 1)"></i>
</th> 
        <th>  
  <i class="up" onclick="sort_table(2, 0)"></i> Price
  <i class="down" onclick="sort_table(2, 1)"></i></th>
        <th>  <i class="up" onclick="sort_table(3, 0)"></i> Distance to Pickup
  <i class="down" onclick="sort_table(3, 1)"></i></th>
        <th>

  <i class="up" onclick="sort_table(4, 0)"></i> Delivery Distance
  <i class="down" onclick="sort_table(4, 1)"></i></th>
      </tr>
  </table>

  <form style="border:1px solid #ccc" id="myForm">
    <div class="container">

      <p>Please fill in this form to post a job for our drivers.</p>
      <hr>

      <label for="pickup-address"><b>Pickup Address</b></label>
      <input type="text" placeholder="Enter Address" name="pickup" required>

      <label for="delivery-address"><b>Delivery Address</b></label>
      <input type="text" placeholder="Enter Address" name="delivery" required>

      <label for="price"><b>Price</b></label>
      <input type="text" placeholder="Enter Price" name="price" required>

      <label for="distance-to-pickup"><b>Distance to Pickup</b></label>
      <input type="text" placeholder="Enter distance" name="pickup-distance" required>

      <label for="distance-to-delivery"><b>Distance to Delivery</b></label>
      <input type="text" placeholder="Enter distance" name="delivery-distance" required>

      <button onclick="add_post()" type="button">Post</button>

    </div>
  </form> 



  <script src="main.js"></script>
  </body>
</html>

https://codepen.io/rhut-virani/pen/bJEdZp

Answer 2

这对我有用：

    .down {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      position: relative;
      top: 5px;
      right: 13px;

它只是相对于其初始位置重新定位图标，您可以使用rem代替px来获得响应更快的页面。

这是一个小提琴：https://jsfiddle.net/d3uovkq9/

Answer 3

使向上箭头position: absolute; 这将使它脱离流程。向下箭头将最终在顶部箭头下方。然后，您可以等距移动它们

    .up {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
      position: absolute;
    }

在表单文本旁边放置css对象

3 个答案: