Question

我有这个带有RowFilter函数的表，我显示一条没有找到结果的消息，这条消息是一个隐藏div内的标签，问题是看到thead项目和下一行它应该是带有标签的div但不是，出现一个空白区域，然后是标签。我试图解决这个添加填充0％到我的标签，然后到div但没有任何工作。

这是我的代码：

$(document).ready(function () {
  RowFilter();
});

function RowFilter() {
    var busqueda = document.getElementById('buscar');
    var noResults = document.getElementById('no-results');
    var table = document.getElementById("Tabla2").tBodies[0];

    buscaTabla = function () {
        texto = busqueda.value.toLowerCase();
        var match = false;
        var r = 0;
        while (row = table.rows[r++]) {
            if (row.innerText.toLowerCase().indexOf(texto) !== -1) {
                row.style.display = null;
                match = true;
            }
            else {
                row.style.display = 'none';
            }
        }
        if (!match) {
            noResults.style.display = 'block';
        }
        else {
            noResults.style.display = 'none';
        }
    }
    busqueda.addEventListener('keyup', buscaTabla);
}

 #no-results {
            display: none;
            text-align: center;
            font-weight: bold;
        }

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input class="form-control" placeholder="Search..." id="buscar" type="text"/>
</div>

<hr />
<table id="Tabla2" class="table table-striped">
  <thead>
    <tr class="info">
      <td>ID</td>
      <td>Name</td>
     <td>Description</td>
    </tr>
  </thead>
  <tbody>
    <tr>  
      <td>1</td>
      <td>Mike</td>
      <td>N/A</td>
    </tr>
    <tr>  
      <td>2</td>
      <td>Steven</td>
      <td>N/A</td>
    </tr>
    <tr>  
      <td>3</td>
      <td>Tyler</td>
      <td>Active</td>
    </tr>
  </tbody>
</table>
<div id="no-results" >
  <label style="width:100%; margin-top:0%;" class="control-label label-warning">No results found... </label>
</div>

Pen with code

Answer 1

Bootstrap的表格是margin-bottom: 20px。您可以超过此值（设置为0）或将标签的margin-top设置为-20px。

选项＃1：

<table id="Tabla2" class="table table-striped" style="margin-bottom: 0">

选项＃2：

<div id="no-results" style="margin-top: -20px;">

在我看来，由于bootstrap的布局会影响你的所有布局，在这种情况下最好更改margin-top div的no-result。 /> 这是一个有效的代码：http://codepen.io/anon/pen/pbrvQm

Answer 2

Function DataType(aVal As Variant) As String

Select Case TypeName(aVal)
    Case "String"
        If IsNumeric(aVal) Then
            If LCase(aVal) Like "*d*" Then
                DataType = "Alphanumeric"
            Else
                DataType = "numerical"
            End If
        Else
            If aVal Like "*[0-9]*" Then
                DataType = "Alphanumeric"
            Else
                If aVal = vbNullString Then
                    DataType = "null"
                Else
                    DataType = "Alpha"
                End If
            End If
        End If

    Case "Boolean"
        DataType = LCase(TypeName(aVal))

    Case "Double", "Single", "Integer", "Long", "Byte"
        DataType = "Numerical"

    Case "Range"
        DataType = DataType(aVal.Cells(1, 1).Value)

    Case Else
        DataType = LCase(TypeName(aVal))

End Select

End Function

该表有一个20px的底部边距推动未找到的结果。

桌和div之间的空白与标签

2 个答案: