Question

如果没有数据，我正在尝试使用javascript来隐藏表格。我正在使用Powershell从电子表格中获取数据;但是，如果电子表格中没有数据，则表格不是必需的。

简而言之，如果ID为＆＃34的td;如果为空则隐藏＆＃34;不包含任何数据的div可以带有id＆＃34; sampleDIV＆＃34;或者表格为id＆＃34; Tabletest＆＃34;不可见？

这可能吗？

谢谢：）

＆＃13;

<?php

class Login extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->library('form_validation');
        $this->load->model('login_model');
    }

    public function index() {
        $data['title'] = 'Login';

        $this->form_validation->set_rules('username', 'Username', 'trim|required');
        $this->form_validation->set_rules('password', 'Password', 'trim|required|callback_verify');

        if ($this->form_validation->run() == false) {

            $this->load->view('header_view', $data);
            $this->load->view('login_view', $data);
            $this->load->view('footer_view', $data);

        } else {

            $userdata = $this->login_model->getUser();

            $data = array(
                'user_id' => $userdata->user_id
            );

            // You can set your session userdata

            redirect('success');
        }
    }

    public function verify() {
        if ($this->login_model->verify()) {
            return true;
        } else {
            $this->form_validation->set_message('verify', 'Opps something gone wrong!');
            return false;
        }
    }
}

＆＃13;

我做的事真的很傻吗？

＆＃13;

<div id="SampleDIV">
  <table id="TableTest">
	<tbody>
        <tr>
        <td><b>Data:</b></td>
        <td id="hide if empty"></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 1

if (document.getElementById("hideifempty").innerHTML === "") {
  document.getElementById("SampleDIV").style.display = "none";
}

<div id="SampleDIV">
  <table id="TableTest">
	<tbody>
        <tr>
        <td><b>Data:</b></td>
        <td id="hideifempty"></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>If you can see this it didn't hide</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

您可能希望使用.innerHTML.trim() === "" - 取决于您是否将空格定义为“空白”。

注意：元素ID不应包含空格（尽管在某些浏览器中可能有效），因此我将ID更改为"hideifempty"。

编辑：请注意，上述JS需要位于<{em>之后 <script>之后的<div>元素中，例如，，您可以遵循在结束</body>标记之前立即放置脚本的合理标准做法。或者您可以将上述if语句包含在onload或DOMContentLoaded处理程序中。否则JS将在浏览器解析div和表之前运行。

Answer 2

你试试：

  $('#TableTest tr').each(function() {
  if ($(this).find('td:empty').length) $(this).hide();
});

或者您可以使用css：

tr td:empty {
  visibility: hidden;
  height: 0;

}
td:not(:empty) ~ td:empty{
  visibility: visible;
  height: 100%;
}

Answer 3

是的，这就是你如何做到这一点

if(document.querySelector("#hideIfEmpty").innerHTML.trim() == ""){
   document.querySelector("#SampleDIV").style.display = "none";
}

<div id="SampleDIV">
  <table id="TableTest">
	<tbody>
        <tr>
        <td><b>Data:</b></td>
        <td id="hideIfEmpty"></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

您应该添加一些检查，以确保存在ID为hideIfEmpty和SampleDIV的元素以防止出错。此外，元素的ID不能包含空格，这就是我将hide if empty更改为hideIfEmpty的原因。

如果文本框不包含数据，请隐藏它们

3 个答案: