Diskuze: Ako zlúčiť vybrané bunky v tabulke

JavaScript JavaScript Ako zlúčiť vybrané bunky v tabulke

Avatar
juraj
Člen
Avatar
juraj:

Ako sa zlučujú vybraté bunky v tabulke s príkazmy colspan a rowspan pri dynamickej tabulke

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

        <style>
        table td {
    border:1px solid #ddd;
    height:30px;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
.selected {
    background:#69c;
}
table {
    width:100%;
    border-collapse:collapse;
}
</style>
        <script>
        window.onload = function () {
        $('td').mousedown(function () {
    $(this).closest('table').find('td').removeClass('selected');
     start = {
        x: this.cellIndex,
        y: this.parentNode.rowIndex
    }
    $(this).closest('table').find('td').mouseover(function () {
        x1 = Math.min(start.x, this.cellIndex);
       y1 = Math.min(start.y, this.parentNode.rowIndex);
         x2 = Math.max(start.x, this.cellIndex);
        y2 = Math.max(start.y, this.parentNode.rowIndex);

        $(this).closest('table').find('td').each(function () {
           x = this.cellIndex;
             y = this.parentNode.rowIndex;

            if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
                $(this).addClass('selected');

            } else {
                $(this).removeClass('selected');
            }
        });
    });
     self = this;
    $(document).mouseup(function () {
        $(self).closest('table').find('td').unbind('mouseover');

        $(document).unbind('mouseup');

    });

})
        $("#merge").click(function () {
//code here
/*td.setAttribute('rowspan', rows);
td.setAttribute('colspan',columns);*/

alert("code here for rowspan and colspan cells")


});
}
 </script>

<input type="button" id="merge"  value="Merge Cells">

<table align="left" height="200" border="1" bordercolor="0" cellpadding="2"
cellspacing="2" width="200">
<tbody>
<tr>
<td height="20" width="40">
</td>
<td height="20" width="40">
</td>
<td height="20" width="40"></td>
<td height="20" width="40">
</td>
</tr>
<tr>
<td height="20" width="40"></td>
<td height="20" width="40"></td>
<td height="20" width="40"></td>
<td height="20" width="40"></td>
</tr>
<tr>
<td height="20" width="40"></td>
<td height="20" width="40"></td>
<td height="20" width="40">
</td><td height="20" width="40"></td>
</tr>
<tr>
<td height="20" width="40"></td>
<td height="20" width="40">
</td><td height="20" width="40"></td>
<td height="20" width="40"></td>
</tr>
</tbody>
</table>&nbsp;
 
Odpovědět 15. února 22:41
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.