Question

我已经尝试了一段时间，将我为html表工作的jquery插入行/插入列功能复制到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

这可以通过以下方式完成。这使用了您使用的相同方法，并将div克隆到各自的位置。

运行以下代码片段::

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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/>

＆＃13;

这应该可以帮助您入门。

使用css表插入行/列

1 个答案: