부트 스트랩 알약이 테이블 안에서 작동하도록하십시오.

Question

테이블 테이블 행의 드롭 다운 목록에 부트 스트랩 알약을 추가하려고합니다. 따라서 사용자가 알약을 선택하면 해당 행의 오른쪽 열이 업데이트됩니다.

하지만 문제는 지금 행에서 하나의 열만 업데이트된다는 것입니다. 또한 드롭 다운 제목에서 목록에 선택한 항목 이름을 표시하려고합니다.

누군가 나를 도와주세요. 사전에 도움을 https://jsfiddle.net/chris13786/r4Lv8uzz/

감사합니다 - 여기

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<table class="table table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>SOR</th> 
 
     <th>KPI</th> 
 
     <th>Oty</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">Month</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row"> 
 

 

 

 
     <div class="dropdown"> 
 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    \t \t \t \t \t \t \t A 
 
    \t \t \t \t \t \t </button> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
 
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> 
 
       <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">A</a> 
 
       <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">B</a> 
 
       <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">C</a> 
 
       <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">D</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 

 

 
     </th> 
 

 

 

 
     <td> 
 
     <div class="tab-content" id="v-pills-tabContent"> 
 
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">A</div> 
 
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">B</div> 
 
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">C</div> 
 
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">D</div> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="tab-content" id="v-pills-tabContent"> 
 
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">A</div> 
 
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">B</div> 
 
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">C</div> 
 
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">D</div> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="tab-content" id="v-pills-tabContent"> 
 
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">A</div> 
 
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">B</div> 
 
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">C</div> 
 
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">D</div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

는 jsfiddle입니다.

Answer 1

당신은 HTML이 올바르게 마크 업

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<table class="table table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>SOR</th> 
 
     <th>KPI</th> 
 
     <th>Oty</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="row">Month</th> 
 
     <td>Mark</td> 
 
     <td>Otto</td> 
 
     <td>@mdo</td> 
 
    </tr> 
 
    <tr> 
 
     <th scope="row"> 
 

 
     <div class="dropdown"> 
 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      A 
 
      </button> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> 
 
       <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">A</a> 
 
       <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">B</a> 
 
       <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">C</a> 
 
       <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">D</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 

 

 
     </th> 
 

 

 

 
     <td> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      A 
 
      </button> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu3"> 
 
      <div class="nav flex-column nav-pills" id="v-pills-tab3" role="tablist" aria-orientation="vertical"> 
 
       <a class="nav-link active" id="v-pills-home-tab3" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">A</a> 
 
       <a class="nav-link" id="v-pills-profile-tab3" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">B</a> 
 
       <a class="nav-link" id="v-pills-messages-tab3" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">C</a> 
 
       <a class="nav-link" id="v-pills-settings-tab3" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">D</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      A 
 
      </button> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> 
 
       <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">A</a> 
 
       <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">B</a> 
 
       <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">C</a> 
 
       <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">D</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </td> 
 
     <td> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
      A 
 
      </button> 
 
      <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> 
 
       <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">A</a> 
 
       <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">B</a> 
 
       <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">C</a> 
 
       <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">D</a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>