NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
juraj
Člen
Avatar
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.