如何将输入字段放在动态增长的表下方

时间：2018-04-05 01:02:14

标签： javascript jquery html css

我有一个父div，它在顶部和下面包含一个子表，一组输入字段。

该表具有给定的顶部/左侧定位，并且它的高度是动态的。

.table-panel {
 position: absolute;
 top: 30px;
}

输入字段也具有预先指定的顶部/左侧值，这些值是根据固定的表格高度计算的。

.one {
  top: 300px;
  left: 0;
}

.two {
  top: 350px;
  left: 0;
}

问题是，如果实际表格高度大于原始固定高度，则表格和输入字段在渲染时会重叠。这里示例：https://jsfiddle.net/c2Lztzfd/142/

我可以自由地重新调整字段的顶部/左侧定位，但必须遵守字段之间的确切间隙。因此，使用flex布局不起作用。

作为一种解决方案，我正在考虑重新调整原始输入字段的位置，以便它们向下移动x个像素。其中x是实际工作台高度与原始高度之间的差异。

有没有更好的方法来解决这个问题，例如使用css定位（绝对/相对）...？

4 个答案:

答案 0 :(得分：1)

您已将package my.pack; import java.sql.*; import java.util.logging.Level; import java.util.logging.Logger; public class DbConnection { private static String dbURL = "jdbc:mysql://localhost:3306/"; private static String schemaName = "assignment4"; private static String dbUsername = "root"; private static String dbPassword = "888888"; private static Connection connection; public DbConnection() { try { // load the DB driver Class.forName("com.mysql.jdbc.Driver"); // get a DB connection connection = DriverManager.getConnection(dbURL + schemaName , dbUsername, dbPassword); } catch (ClassNotFoundException ex) { System.out.println("ERROR: Driver not found"); connection = null; } catch (SQLException ex) { System.out.println("ERROR: Could not create DB connection"); } } public static Statement getNewStatement() { Statement statement; try { if (connection == null) { Logger.getLogger(DbConnection.class.getName()).log(Level.SEVERE, "ERROR: Problem with DB connection: "); System.out.println("ERROR: Problem with DB connection:"); return null; } /* Creating a statement object that we can use for running * SQL statements commands against the database.*/ statement = connection.createStatement(); } catch (SQLException e) { Logger.getLogger(DbConnection.class.getName()).log(Level.SEVERE, null, e); System.out.println("ERROR: Could not create SQL statement object: " + e); statement = null; } return statement; } public static Connection getConnection() { if (connection == null) { Logger.getLogger(DbConnection.class.getName()).log(Level.SEVERE, "ERROR: Problem with DB connection: "); System.out.println("ERROR: Problem with DB connection:"); return null; } return connection; } public static void closeConnection() { if (connection != null) { try { connection.close(); } catch (SQLException ex) { Logger.getLogger(DbConnection.class.getName()).log(Level.SEVERE, null, ex); } } } } 位置提供给字段。将它们移动到包含表格的div中，并使位置相对。这样他们将相对于桌子及其下方。

查看https://jsfiddle.net/c2Lztzfd/150/

答案 1 :(得分：1)

看，我刚才所做的就是评论出来的每一段css代码都是为了实现你所要求的。现在，您可以自行决定是否可以通过移除这些部件来逃脱，或者您无权这样做。基本上它是关于absolute定位并将top属性设置为固定值;如果你可以摆脱它，那么你应该被设置。

LMK

＆＃13;
＆＃13; 
$('#add').click(function(){
  $('tbody').append($('tbody').children('tr').last().clone());
});
＆＃13; 
div.parent {
   position: relative;
   width: 500px;
   /*height: 400px;*/
   border: 3px solid green; 
}

.table-panel {
 /*position: absolute;*/
 top: 30px;
}

div.field {
    /*position: absolute;*/
    width: 105px;
    height: 30px;
    border: 3px solid blue;
}

.one {
  /*top: 300px;*/
  left: 0;
}

.two {
  /*top: 350px;*/
  left: 0;
}


/* table Styling */
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    /* border-collapse: collapse; */
    width: 100%;
    border: 3px solid black;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="table-panel">
    <table id="customers">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>  
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
         <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
         <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
      </tbody>
   </table>
  </div>
    <div class="field one">absolute Field 1</div>
    <div class="field two">absolute Field 2</div>
    <button id="add">add</button>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

由于你没有说jquery，我添加了一些例子，你可以做到这一点。

即使是比2更多的字段。

$(document).ready(function() {
  
  var $table = $('#customers');
  
  var $fields = $('.field');
  
  for(var i=0; i<$fields.length; i++) {
    var top = + $table.height() + ((i+1) * 50);
    $fields.eq(i).css('top', top+'px');
  }

});
div.parent {
   position: relative;
   width: 500px;
   height: 400px;
   border: 3px solid green; 
   display: flex;
   flex-direction: column;
}

.table-panel {
 position: absolute;
 top: 30px;
}

div.field {
    position: absolute;
    width: 105px;
    height: 30px;
    border: 3px solid blue;
}

.one {
  top: 300px;
  left: 0;
}

.two {
  top: 350px;
  left: 0;
}


/* table Styling */
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    /* border-collapse: collapse; */
    width: 100%;
    border: 3px solid black;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="table-panel">
    <table id="customers">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>  
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
         <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
         <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
      </tbody>
   </table>
  </div>
    <div class="field one">absolute Field 1</div>
    <div class="field two">absolute Field 2</div>
</div>

答案 3 :(得分：0)

我不认为这正是你想要的效果，但是你可以做这样的事情https://jsfiddle.net/Afro523/c2Lztzfd/152/稍微改变了层次结构和你的CSS以使粘性效果起作用。我不知道你的要求所以我认为一个纯粹的CSS解决方案可能会漂浮你的船。如果不是我喜欢jQuery的答案。

<强>的index.html 

<div class="parent">
  <div class="table-panel">
    <table id="customers">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>  
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
         <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
         <tr>
          <td>Berglunds snabbköp</td>
          <td>Christina Berglund</td>
          <td>Sweden</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr> 
      </tbody>
   </table>
       <div class="field one">absolute Field 1</div>
  </div>
    <div class="field two">absolute Field 2</div>
</div>

<强> CSS 

div.field {
    position: sticky;
    width: 105px;
    height: 30px;
    border: 3px solid blue;
}

.one {
  bottom: 0;
  left: 0;
}

.two {
  top: 350px;
  left: 0;
}
相关问题
最新问题