調整輸入大小的跨度大小

我有各種跨度變成輸入框，所以我可以編輯它們，每次我按下特定的按鈕。我的問題是CSS，它改變了表格的整個佈局。調整輸入大小的跨度大小

我該如何解決這個問題，所以表格行不會發生變化，輸入框的寬度和高度與跨度相同？

這裏是我的小提琴：

這裏的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>

和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' 
    }); 
}); 
});

來源

2016-08-20 laker001

什麼應該是默認的''width''的''元素是什麼？ – guest271314

@ guest271314這並不重要。我主要關心的是它們具有相同的值 – laker001

級「COL-XS-6」失蹤時保存：

$("#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' 
    }); 
    }); 
});

更新小提琴：http://jsfiddle.net/ersamrow/2D9FW/197/

來源

2016-08-20 14:39:15

整個事情仍在向右移動。寬度和高度仍然不一樣。你能檢查一下嗎？ – laker001

嘗試更新小提琴 –

它仍然不起作用... – laker001

-1

嘗試修復高度和跨度和輸入的寬度---

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

來源

2016-08-20 14:47:55 bhupesh

調整輸入大小的跨度大小

回答

相關問題