用css表插入行/列

Question

我已经尝试了一段时间来重复jQuery插入行/插入列功能，我有一个HTML表的CSS表工作。我已经搜索并尝试了一个没有成功的解决方案。

这里是fiddle到我的工作，我拿出了我的企图代码，因为它没用。

我的代码列在下面。 感谢您的帮助。

HTML

div class="ws-css-table" > 
     <div class="ws-css-table-tr"> 
     <div class="ws-css-table-td" id="1"></div> 
     <div class="ws-css-table-td" id="2"></div> 
    </div> 
    <div class="ws-css-table-tr"> 
     <div class="ws-css-table-td" id="3"></div> 
     <div class="ws-css-table-td" id="4"></div> 
    </div> 
</div>  
<br/> 
<button id="css-irow">CSS-Insert Row</button><button id="css-icol">CSS-Insert Column</button><br/><br/> 

<br/> 
<br/> 
<table border="1" id="mtable"> 

<tbody> 
    <tr> 
     <td class="container"></td> 
     <td class="container"></td> 
    </tr> 
    <tr> 
     <td class="container">a</td> 
     <td class="container">b</td> 
    </tr> 

    </tbody> 
</table><br/> 



<button id="irow">Insert Row</button> 
<button id="icol">Insert Column</button><br/><br/> 



<br/>There are <span id="rowcount"></span> rows 
<br/>There are <span id="colcount"></span> columns 

jQuery的

$('#css-irow').click(function(){ 
    }); 
$('#css-icol').click(function(){ 
}); 

//////////////////////////////////////////// 
$('#irow').click(function(){ 
$("#mtable tbody tr:last").clone().appendTo('#mtable tbody').find("td").empty(); 

    var rowCount = $('#mtable tr').length; 
    $("#rowcount").text(rowCount) 
    }); 
//////////////////////////////////////////// 
$('#icol').click(function(){ 
     $('#mtable tr').append($("<td class='container'>")); 
     $('#mtable thead tr>td:last').html($('#col').val()); 
     $('#mtable tbody tr').each(function(){$(this).children('td:last').append($(''))}); 

    var col = $('#mtable tbody tr:first > td').length; 
    $("#colcount").text(col);  
}); 

CSS

.ws-css-table { 
    display: table; 


} 
.ws-css-table-tr { 
    display: table-row;  
} 
.ws-css-table-td { 
    display: table-cell; 
    border:1px solid #000; 
    width: 20px; 
    height:20px; 
    text-align:center; 
    vertical-align:middle; 
} 

Answer 1

这可以在跟随着来完成g方式。这使用您使用的相同方法并将div复制到它们各自的位置。

下方运行::

$('#css-irow').click(function(){ 
 
\t $(".ws-css-table-tr:last").clone().appendTo('.ws-css-table'); 
 
}); 
 
$('#css-icol').click(function(){ 
 
\t $(".ws-css-table-td:last").clone().appendTo('.ws-css-table-tr'); 
 
});

.ws-css-table { 
 
    display: table; 
 
} 
 
.ws-css-table-tr { 
 
    display: table-row;  
 
} 
 
.ws-css-table-td { 
 
    display: table-cell; 
 
    border:1px solid #000; 
 
    width: 20px; 
 
    height:20px; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ws-css-table" > 
 
    <div class="ws-css-table-tr"> 
 
     <div class="ws-css-table-td"></div> 
 
     <div class="ws-css-table-td"></div> 
 
    </div> 
 
    <div class="ws-css-table-tr"> 
 
     <div class="ws-css-table-td"></div> 
 
     <div class="ws-css-table-td"></div> 
 
    </div> 
 
</div>  
 
<br/> 
 
<button id="css-irow">CSS-Insert Row</button><button id="css-icol">CSS-Insert Column</button><br/><br/>

此代码段应帮助您开始。