当页面通过javascript加载到div类时,如何追加一个类?

时间:2015-03-30 06:35:22

标签: javascript jquery html twitter-bootstrap

我有这样的HTML代码:

<div class="panel panel-default">
                <div class="panel-heading">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseUnapprovedUsers" style="text-decoration:none"><center><b>Waiting User List</b></center></a>
                </div>
                <div id="collapseUnapprovedUsers" class="panel-collapse collapse">
                    <div class="panel-body">
                        <div class="col-sm-12">
                            <table class="col-sm-12">
                                <tbody>
                                <tr id="filter_global1">
                                    <div class="col-sm-12">
                                        <td class="col-sm-6"> <b> Use Smart Search :</b>
                                            <input type="checkbox" class="global_filter1" id="global_smart1">
                                        </td>
                                        <td align="right" class="col-sm-6"> <b> Search :</b>
                                            <input type="text" class="global_filter1" id="global_filter1">
                                        </td>
                                    </div>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <table id="unapprovedUserDetails" class="table table-striped table-bordered table-hover text-center">
                                    <thead>
                                    <th><b><center>Full Name</center></b></th>
                                    <th><b><center>Username</center></b></th>
                                    <th><b><center>Password</center></b></th>
                                    <th><b><center>Email</center></b></th>
                                    <th><b><center>Contact No</center></b></th>
                                    <th><b><center>Role</center></b></th>
                                    <th><b><center></center></b></th>
                                    <th><b><center></center></b></th>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

和javascript这样的功能..

$(document).ready(function() {

        if(@jsonData.length != 5)
        {
            json = (@Html(jsonData));
            for(i=0; i<json.users.length; i++)
            {
                $('#approvedUserDetails tbody').append("<tr><td>" + json.users[i].fullName + "</td><td>" + json.users[i].userName + "</a></td><td>" + json.users[i].userPassword + "</td><td>" + json.users[i].userEmail + "</td><td>" + json.users[i].userContact + "</td><td>" + json.users[i].userRole + "</td><td><a href='/deleteApprovedUser/" + json.users[i].userName + " ' onclick='temp();return '  class='btn btn-outline btn-primary btn-xs' style='margin:0px;text-decoration:none'>" + "Delete" + "</a></td></tr>");
            }

当用户点击我通过javascript创建的删除按钮时,我需要在<div id="collapseApprovedUsers" class="panel-collapse collapse">中再添加一个类...我要添加的类名是&#34;&#34;

我该怎么办?

4 个答案:

答案 0 :(得分:1)

$('#collapseApprovedUsers').addClass('in');

只需在Jquery中使用addClass。

答案 1 :(得分:0)

如果您只想使用javascript:

function temp() //called on click of delete button
{
    document.getElementById("collapseApprovedUsers").className += " in";
}

答案 2 :(得分:0)

我假设您想在onc​​lick中的temp()函数周围执行此操作以获取删除锚标记。

您目前有onclick='temp();return;'。尝试类似onclick='temp(); $(this).addClass(\'in\');'的内容。 $(this)指的是链接标记。您还可以使用$(this).parents('td')$(this).parents('tr')来获取href所属的父tdtr。 (如果您希望将该类添加到该类中。

答案 3 :(得分:0)

我得到了解决方案...我正在使用带有scala的javascript,并且我通过方法参数传递面板ID并将其捕获到html page&amp;然后使用它我添加&#34; in&#34;类...

def loadDeleteUser(userName : String) = SubjectPresent(new AccessControlHandler) {
Action { implicit request =>
  databaseDriver.deleteUserFromList(userName, "unapproved")
  Ok(views.html.userDetails("Nephele: User Management", databaseDriver.loadTempAllUsers(), databaseDriver.loadAllUsers(request.session.get("userId").toString) , "collapseUnapprovedUsers", new AccessControlHandler))
}}

在最后一行看到我已经通过了面板ID&#34; collapseUnapprovedUsers&#34;并且我在带有脚本的html页面中使用它并添加类

 $('#@msg').addClass("in");

这里msg是我在那里获取那个id的字符串...按照我的期望工作正常... 对你们所有人而言......