调整输入大小的跨度大小

我有各种跨度变成输入框，所以我可以编辑它们，每次我按下特定的按钮。我的问题是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

调整输入大小的跨度大小

回答

相关问题