JQuery - Text in die falsche Tabelle Spalte mit Display-Block

Question

Warum wird der Text nicht in der richtigen Spalte (td) für den Fall? Ich habe getestet, dass dies nur passiert, wenn der Tr-Block früher versteckt und dann angezeigt wird.

 $('#button_phonenumber').click(function() { 

      $('#cmobile_row').css('display', 'block'); 
      $('#customer_phonenumber').css('display', 'none'); 
      $('#cmobile').text($('#cphonenumber').val()); 

    }); 

html

 </tr> 
      <tr> 
       <td>location:</td> 
       <td><span id="clocation"></span></td> 
      </tr> 
      <tr> 
       <td>Email:</td> 
       <td><span id="cemail"></span></td> 
      </tr> 
      <tr id="cmobile_row"> 
       <td>phone:</td> 
       <td><span id="cmobile"></span></td> 
      </tr> 
     </table> 

Bild

Sie sehen hier, dass die dynamisch gesetzt phonenumer nicht in seiner suppossed Spalte ist. Stattdessen scheint es zu derselben Spalte wie der Text zu gehören.

Was ist die Ursache dafür und wie könnte es möglicherweise gelöst werden?

Answer 1

Sie können dies mit display:table-row oder verwenden Sie jquery mit .show() Ereignis.

$('#button_phonenumber').click(function() { 
 
    $('#cmobile_row').css('display', 'table-row'); 
 
    $('#customer_phonenumber').css('display', 'none'); 
 
    $('#cmobile').text($('#cphonenumber').val()); 
 
}); 
 
$('#button_phonenumbers').click(function() { 
 
    $('#cmobile_row').show(); 
 
    $('#customer_phonenumber').css('display', 'none'); 
 
    $('#cmobile').text($('#cphonenumber').val()); 
 
});

#cmobile_row{ 
 
    display:none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button_phonenumber" style="color:red">Click me : With display:table-row</div> 
 
<table> 
 
    <tr> 
 
    <td>location:</td> 
 
    <td><span id="clocation">Ville</span></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Email:</td> 
 
    <td><span id="cemail">dfsfd@sdfsd.com</span></td> 
 
    </tr> 
 
    <tr id="cmobile_row"> 
 
    <td>phone:</td> 
 
    <td><span id="cmobile">078855554</span></td> 
 
    </tr> 
 
</table> 
 
<div id="button_phonenumbers" style="color:red">Click me : With .show()</div>