2015-03-30 2 views
0

У меня есть HTML-код, как это:Как добавить еще один класс, когда страница загружается в div-класс через javascript?

<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> 

и яваскрипт функция, как это ..

$(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>"); 
      } 

мне нужно добавить еще один класс в <div id="collapseApprovedUsers" class="panel-collapse collapse">, когда пользователь нажимает кнопку, которую я сотворил через Удалить javascript ... имя класса, которое я хочу добавить, это «in»

как я могу это сделать ???

ответ

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

Просто используйте addClass в JQuery.

+0

Я пробовал это ... но при загрузке страницы он примет тот же класс в html-коде .. это основная проблема ... – tejas3006

+0

if i правильно ли ваша проблема, вы хотите сохранить состояние «Удалить» при обновлении страницы. Ex, когда пользователь нажимает кнопку Удалить, вы хотите добавить новый класс в этот div, а при обновлении следующей страницы вы хотите, чтобы этот класс находился в одном месте. Я прав. – Iceburg

+0

именно это основная проблема ... я хочу, чтобы этот класс добавлялся даже после обновления страницы – tejas3006

0

В случае, если вы хотите просто в JavaScript:

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

Я сделал это, но когда страницы загружаются, он будет иметь тот же класс, что и для html-кода. Я хочу, чтобы класс «в» добавлялся даже после загрузки страницы. – tejas3006

+0

Вы хотите его на 'onclick', и вы отправляете назад страницу после того, как вы нажмите на удаление? –

+0

Посмотрите, когда я нажму на страницу удаления, будет обновлен, и класс будет добавлен из этого прекрасно, но он будет удален после обновления страницы ... Я хочу, чтобы этот класс добавлялся даже после загрузки страницы – tejas3006

0

Я предполагаю, что вы хотите сделать это вокруг temp() функции в OnClick для удаления тега привязки.

У вас есть onclick='temp();return;'. Попробуйте что-то вроде onclick='temp(); $(this).addClass(\'in\');'. $(this) относится к тегу ссылки. Вы также можете использовать $(this).parents('td') или $(this).parents('tr'), чтобы получить родителя td или tr, которому принадлежит href. (Если вы хотите добавить класс к этому вместо этого.

+0

Я сделал это, но когда страницы загружаются, он будет иметь тот же класс, что и для html-кода. Я хочу, чтобы класс« в »добавлялся даже после загрузки страницы ... это основная проблема – tejas3006

0

У меня есть решение ... Я использую javascript с scala, и я передаю идентификатор панели через параметр метода и поймаю его на странице html &, затем используя его i «м добавляя„в“классе ...

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)) 
}} 

в последней строке см я прошла панель ИД„collapseUnapprovedUsers“и я использую его в HTML-страницу с помощью сценария и добавить класс

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

здесь msg - это строка, в которой я извлекаю этот id ..., который отлично работает, как p er мое ожидание ... thanx для всех вас ...

Смежные вопросы