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

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

juraj

Člen

juraj:15.2.2016 22:41

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.2.2016 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.