Anpassen der Größe der Eingabe an die Größe der Spannweite

Question

Ich habe verschiedene Spannweiten, die in Eingabefelder verwandeln, so dass ich sie bearbeiten kann, jedes Mal wenn ich eine bestimmte Taste drücke. Mein Problem ist das CSS, das das gesamte Layout der Tabelle verändert.

Wie kann ich das lösen, so dass die Tabellenzeilen nicht ändern, und die Breite und Höhe der Eingabefelder sind genau die gleichen wie die jeweiligen Span?

Hier ist meine Geige:

FIDDLE

Hier ist der HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<table> 
    <tr> 
    <th class="col-xs-6">Name</th> 
    <th class="col-xs-2" >Value</th> 
    </tr> 
    <tr> 
    <td><span id="s1" class="editable-span col-xs-6">John</span> 
    </td> 
    <td> 
     <span id="s2" class="editable-span col-xs-2">2345</span> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <span id="s3" class="editable-span col-xs-2">Dave</span> 
    </td> 
    <td> 
     <span id="s4" class="editable-span col-xs-2">5678</span> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <span id="s5" class="editable-span col-xs-12 col-md-8">Sarah</span> 
    </td> 
    <td><span id="s6" class="editable-span col-xs-2">1987</span></td> 
    </tr> 
</table> 
<button id="edit_properties" class="col-xs-2">Edit</button> 
<button id="unedit_properties" class="col-xs-2">Save</button> 

Und das JavaScript:

$("#edit_properties").on("click", function() { 
$('.editable-span').replaceWith(function() { 
return $("<input>", { 
    val: $(this).text(), 
    type: "text", 
    id: this.id, 
    class: 'editable-input' 
    }); 
}); 
}); 

$("#unedit_properties").on("click", function() { 
$('.editable-input').replaceWith(function() { 
return $("<span>", { 
    text: this.value, 
    id: this.id, 
    class: 'editable-span' 
    }); 
}); 
}); 

Answer 1

Klasse "col-xs-6" fehlt, wenn save :

$("#edit_properties").on("click", function() { 
    $('.editable-span').replaceWith(function() { 
    return $("<input>", { 
     val: $(this).text(), 
     type: "text", 
     id: this.id, 
     class: 'editable-input' 
    }); 
    }); 
}); 

$("#unedit_properties").on("click", function() { 
    $('.editable-input').replaceWith(function() { 
    return $("<span>", { 
     text: this.value, 
     id: this.id, 
     class: 'editable-span' 
    }); 
    }); 
}); 

Aktualisiert Geige: http://jsfiddle.net/ersamrow/2D9FW/197/

Answer 2

Try Höhe und Breite der Spanne und Eingang zu beheben ---

span 
{ 
width:100px; 
height:20px; 
padding:2px;} 
input 
{ 
width:100px; 
height:20px; 
padding:2px; 
}