溢出TD內容到下一個TD元件，而不在HTML表

Question

移位考慮以下實體模型 -

第三列包含一個按鈕，點擊它被替換爲一個文本框和保存時;取消按鈕。整個實體溢出到下一個td元素，浮動在頂部而不會取代下一個td元素中的按鈕。這一切都在<table>元素中完成。

有人可以提出一種方法來實現這一目標嗎？

Answer 1

像這樣的東西？

$(function() { 
 
\t $('input').on('focus blur', function(e) { 
 
    \t var elem = $(this), 
 
     td = elem.closest('td'), 
 
     div = td.find('div'); 
 
     show = (e.type == 'focus'); 
 
    td.toggleClass('flowTD', show); 
 
\t \t div.toggleClass('flowDIV'); 
 
    }); 
 
});

* { box-sizing: border-box; } 
 
td { 
 
    padding: 0 .25em; 
 
    height: 3em; 
 
    border: 1px solid lightgreen; 
 
} 
 
input { 
 
    width: 3em; 
 
} 
 
.flowTD { 
 
    padding-top: 0; 
 
    vertical-align: top; 
 
} 
 
.flowDIV { 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
    background: lightblue; 
 
    height: 3em; 
 
    vertical-align: middle; 
 
    line-height: 3em; 
 
    margin-left: -.25em; 
 
    margin-top: -1px; 
 
    padding: 0 .25em; 
 
} 
 
div input[type="submit"] { 
 
    display: none; 
 
    width: auto; 
 
} 
 
div.flowDIV input[type="submit"] { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>2749.5</td> 
 
    <td>0.13</td> 
 
    <td> 
 
     <div> 
 
     <input type="text" /> 
 
     <input type="submit" value="Save" /> 
 
     <input type="submit" value="Cancel" /> 
 
     </div> 
 
    </td> 
 
    <td>buttons</td> 
 
    </tr> 
 
</table>

這將需要一些調整，但給你一個良好的開端。

Answer 2

您可以創建編輯按鈕，然後使用保存和取消按鈕隱藏輸入，這些按鈕將顯示在編輯按鈕上。將其設置爲絕對，就是這樣。

事情是這樣的：

HTML

<table> 
    <tr> 
    <td>2749.5</td> 
    <td>0.13</td> 
    <td> 
     <button class="click">3.5</button> 
     <div class="show"> 
     <input type="text" class="showInput"> 
     <button class="save">Save</button> 
     <button class="cancel">Cancel</button> 
     </div> 
    </td> 
    <td> 
     <button>></button> 
     <button>||</button> 
    </td> 
    </tr> 
</table> 

CSS

table { 
    border-collapse: collapse; 
    background: #fff; 
    position: relative; 
    width:450px; 
} 

th,td { 
    padding: 15px; 
    text-align: left; 
    width:25%; 
    border-bottom: 1px solid #ddd; 
} 

input { 
    width: 80px; 
} 

.show { 
    display: none; 
    position: absolute; 
    right: 15px; 
    top:15px; 
    background: #F6FAFE; 
} 

jQuery的

$('.click').on('click', function() { 
    $(this).hide(); 
    $('.show').show(); 
}); 
$('.save,.cancel').on('click', function() { 
    $('.show').hide(); 
    $('.click').show(); 
}); 

你可以在這裏進行測試https://jsfiddle.net/azdfdss5/