java java - 5 months ago 23
jQuery Question

JQuery - text put in the wrong table column using display block

Why is not the text put in the right column (td) in case? I have tested that this only happends when the tr-block is hidden earlier and then shown.

$('#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>


image

enter image description here

You see here that the dynamically set phonenumer is not in its suppossed column . Instead it seem to belong to the same column as the text.

What is the cause of this and how could it possibly be solved?

Answer

You can make this with display:table-row or use jquery with .show() event.

$('#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>

Comments