html与javascript之动态篇

以下所讲内容采用bootstrap模板，jquery库，对于原生html大致也同样适用

转载前请贴上博客链接：http://blog.csdn.net/gugugujiawei

一、侧边栏分页

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->
                            
                        </li>  
                      	 
                        <li>
                            <a href="#"><i class="fa fa-wrench fa-fw"></i> 审核业务<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="{% url 'user-review' %}">用户审核业务</a>
                                </li>
                                <li>
                                    <a href="{% url 'device-review' %}">设备审核业务</a>                                  
                                </li>
                                <li>
                                    <a href="{% url 'middleware-review' %}">中间件审核业务</a>
                                </li>

                            </ul>
                            <!-- /.nav-second-level -->
                        </li>                                                                                                
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->

当点击某一项跳转到另外页面时，可以在相应的html页面中改为

<li class="active">
	<a href="#"><i class="fa fa-wrench fa-fw"></i> 审核业务<span class="fa arrow"></span></a>
	<ul class="nav nav-second-level">
		<li>
			<a class="active" href="{% url 'user-review' %}">用户审核业务</a>
		</li>
		<li>
			<a href="{% url 'device-review' %}">设备审核业务</a>                                  
		</li>
		<li>
			<a href="{% url 'middleware-review' %}">中间件审核业务</a>
		</li>
	</ul>
 	<!-- /.nav-second-level -->
</li> 

二、单击按钮弹出modal对话框

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增用户</button>

modal为嵌入在html div中的html隐藏文本

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background:#d9edf7">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">
×
</button>
<h4 class="modal-title" id="myModalLabel">
新增用户信息
</h4>
</div>                                                              
            <div class="modal-body form-horizontal">                       
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" placeholder="用户名">
                     </div>
                </div>                                                                                        
            </div>
            <div class="modal-footer">
                <input type="hidden" name="add-name" id="add-id"></input>
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <input class="btn btn-primary" type="submit" name="addButton" value="确定"></input>
            </div>                        
</div>
</div>
</div>

三、按钮触发事件

<input type="submit" class="btn btn-primary" name="pass" value="通过所选"></input>

<pre name="code" class="javascript"><script type="text/javascript">
$(document).ready(function(){
$("input[name='pass']").click(function(){
check("hidden-value2");
});
});

</script>

监听name为pass的按钮点击事件，当成也可以在button中添加onclick方法。

四、获取table的行列的文本内容，或是值

var rowsize = document.getElementById('user-history-body').getElementsByTagName('tr').length;

解释：获取tbody---<tbody id="user-history-body">，得到其下tr标签的个数。

var td = document .getElementById ("dataTables-user-history").rows [i+1].cells[8].innerHTML;

解释：获取

<table class="table table-striped table-bordered table-hover" id="dataTables-user-history">

下tobody的第i+1行第8列的文本

五、checkbox的全选和全不选操作

假设监听的对象的id="chk_all2"，另外需置所有的checkbox的name="transPro2"

<pre name="code" class="html">

                        //<!--全选与全不选的操作（点击checkbox）-->
                        $(document).on("click","#chk_all2",function(){
                            var ischecked= $("#chk_all2:checked").length;
                            var $checkboxs =$("input[name='transPro2']");
                            if(ischecked){
                                $checkboxs.prop("checked",true);
                            }else{
                                $checkboxs.prop("checked",false);							 
                            }
                        });
                        //<!--end-->

<pre name="code" class="javascript">1、可以类似QQ邮箱那样用checkbox控制checkbox

<input type="checkbox" name="transPro2" id="chk_all2"/>

<pre name="code" class="javascript">2、用点击文本的方式控制则为:

<a href="javascript:void(0)" id="allSelect2" >全部</a>

<pre name="code" class="javascript">而javascript改为

<pre name="code" class="html"><script type="text/javascript">
$(document).on("click","#allSelect2",function(){
var $checkboxs =$("input[name='transPro2']");
$checkboxs.prop("checked",true);
});

</script> 

注意有些人喜欢将

 href="javascript:void(0)"

改为href="#"，但这样的话点击之后会使页面回到页首部，太过突兀。