테이블에 행을 추가하는 부트 스트랩

테이블에 행을 동적으로 추가하려고합니다. 어떤 이유로 테이블에 행을 추가 할 때 모든 행이 검색되어 전체 행에 걸쳐 있지 않습니다. 왜 이런 일이 일어나고 어떻게 해결할 수 있습니까? 당신이테이블에 행을 추가하는 부트 스트랩

jQuery를 실행하고 무슨 뜻인지보고 싶다면 여기

내 파일입니다

$(document).ready(function() { 

    $('.close').on('click', function (e) { 
     e.preventDefault(); 
     $(this).parent().parent().remove(); 
    }); 

    $('#submit').click(function() { 
     var name = $('input[name=name]').val(); 
     var phone = $('input[name=phone]').val(); 
     var email = $('input[name=email]').val(); 


     var tr = "<tr>\ 
        <td>\ 
         <a href=\"#" + name + "openModal\">" + name + " </a>\ 
          \ 
          <div id=\"" + name + "openModal\" class=\"modalDialog\">\ 
           <div>\ 
            <a href=\"#close\" title=\"Close\" class=\"close\">X</a>\ 
            <h2> " + name + "</h2>\ 
             ><p>Phone: " + phone + "</p>\ 
             <p>email: " + email + "</p>\ 
           </div>\ 
          </div>\ 
        </td>\ 
        <td> \ 
         <input type='radio' name=\"" + name + "present\">In<br>\ 
         <input type='radio' name=\"" + name + "present\">Out\ 
        </td>\ 
        <td>\ 
         <button type=\"button\" class=\"close\"><span aria-hidden=\"true\">&times;</span><span class=\"sr-only\">Close</span></button>\ 
         <textarea placeholder=\"Optional Note about where your are or your schedule\"></textarea>\ 
        </td>\ 
       </tr>;"; 
     $('#table').append(tr); 

     $("input[type=text]").val(""); 
     $("input[type=tel]").val(""); 
     $("input[type=email]").val(""); 

    }); 
});

그리고 내 HTML을

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>iSignout</title> 

    <link type="text/css" rel="stylesheet" href="bootstrapCSS.css"/> 
    <link href="css/bootstrap.min.css" rel="stylesheet" 

    </head> 
    <body> 

    <div id="left"> 
      <h3 id=add>Add An Employee</h3> 
      <form class="input"> 
       Name: <input type="text" name="name"><br> 
       Phone Number: <input type="tel" name="phone"><br> 
       E-Mail: <input type="email" name="email"><br> 
       <input type="button" value="Add" id="submit" /> 
      </form> 
     </div> 

    <!--Creates the tables with employees --> 
    <div id='table'> 
     <table class= 'table table-hover'> 
      <thead> 
       <tr id="title"><th colspan=3>People In the Office</th></tr> 
      </thead> 

      <tbody> 
      <!--Create rows here --> 
       <tr> 
        <th>Name</th> 
        <th class>IN/OUT Status</th> 
        <th>Optional Note</th> 
       </tr> 

       <tr> 
        <td> 
         <a href="#openModal">Peter Griffin</a> 

          <div id="openModal" class="modalDialog"> 
           <div> 
            <a href="#close" title="Close" class="close">X</a> 
            <h2>Peter Griffin</h2> 
             <p>Phone:123-456-7890.</p> 
             <p>email: [email protected]</p> 
           </div> 
          </div> 
        </td> 
        <td> 
         <input type='radio' name="Peterpresent">In<br> 
         <input type='radio' name="Peterpresent">Out 
        </td> 
        <td> 
         <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
         <textarea placeholder="Optional Note about where your are or your schedule"></textarea> 
        </td> 
       </tr> 

      </tbody> 
     </table> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="bootstrap_script.js"></script> 

    </body> 
</html>

http://jsfiddle.net/36Qzy/

출처

2014-07-07 user3771865

당신에게 ' 새 테이블 행을 곧바로안에 추가하십시오.- id가 table 인 항목 대신, 귀하의 <tbody> 끝 부분에 추가해야합니다. 이 경우 descendant selector을 사용할 수 있습니다. 다음에 $('#submit').click() 핸들러에 append(tr) 줄을 변경 :

$('#table tbody').append(tr);

출처

2014-07-07 17:00:34

오 w 죄송합니다. 나는 CSS로 놀고 있었고 #table을 포맷팅을 위해 div를 참조하도록 변경했다. 감사합니다 – user3771865

알아두면 좋은 또 다른 일. 테이블에 행을 추가 할 때 새로 추가 된 행을 삭제할 수 없습니다. 나는 live()를 시도했지만 어느 쪽도 작동하지 않았다. – user3771865

'$ ('. close'). click()'핸들러를 바인드 할 때 새로운 행이 존재하지 않기 때문이다. '.live()'는 더 이상 사용되지 않지만 클릭 핸들러를'$ (document) .on ('click', '.close', function (e) {/ * Code}로 업데이트하면 작동하게 할 수 있습니다. * /}); ' –

변화

$('#table').append(tr);

에

$('#table table').append(tr);

테이블의 사용자 ID는 사업부에 아닌 테이블 그래서 자체에 div 요소에 테이블 요소가 아닌 테이블 요소가 추가됩니다.

출처

2014-07-07 17:07:01 Erik

테이블에 행을 추가하는 부트 스트랩

답변

관련 문제