Ako zlúčiť bunky po označení myšou – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Zdravím
ako zlúčiť bunky v tabuľke, keď ich vyberiem myšou v 
jquery

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

tr = radek; // z td se na to dostanes pres td.parentNode
td = tr.getElementsByTagNames('TD');
td[0].innerHTML += td[1].innerHTML; // spojis obsah td[0] a td[1]
td[0].colspan = (td[0].colspan ? td[0].colspan*1 : 1) + (td[1].colspan ? td[1].colspan*1 : 1); // nastavis colspan
tr.removeChild(td[1]); // odstranis td[1]

#2 peter

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

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

  tr   = y2; // z td se na to dostanes pres td.parentNode
td = tr.getElementsByTagNames('TD');
td[0].innerHTML += td[1].innerHTML; // spojis obsah td[0] a td[1]
td[0].colspan = (td[0].colspan ? td[0].colspan*1 : 1) + (td[1].colspan ? td[1].colspan*1 : 1); // nastavis colspan
tr.removeChild(td[1]); // odstranis td[1]
});

keď som ten kód zkopíroval do tlacidla merge tak mi to nič nerobí.Môžeš mi to upraviť, aby po vybratí buniek

sa zlúčili do colspan alebo rowspan? Nejako mi to nefunguje dakujem

 Co treba pouzit google? Pridat vlastni tvorbu?

<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">aaa</td>
<td height="20" width="40">bbb</td>
<td height="20" width="40" onclick="xxx(this);">sluc td0 a td1</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>

<script>
function xxx(clicked)
{
var tr,td; //zmeneno
tr = clicked.parentNode; //zmeneno
td = tr.getElementsByTagName('TD'); //zmeneno
td[0].innerHTML += td[1].innerHTML;
td[0].colSpan = (td[0].colSpan ? td[0].colSpan*1 : 1) + (td[1].colSpan ? td[1].colSpan*1 : 1); // zmeneno
tr.removeChild(td[1]);
}
</script>

#4 peter
Google som prelistoval dost vela,ale aj tak to nie je ono ako si to predstavujem.

Ja si to predstavujem asi tak, že keď si v tabulke vyberiem napr. štyri stlpce s desiatimy riadkami a kliknem na tlačidlo, ktoré je umiestnené mimo tabuľky, aby sa  tie vybraté bunky  zlúčili

ďakujem

Tak s tim se pocita, ze si to dokazes sam upravit. V opacnem pripade se toho jiste ujme rada nektera firma.

Kazdy druhy vizualni editor to napr umi.
https://www.tinymce.com/…sic-example/
- Table > Insert table > zvolis si pocet radku, sloupcu, kliknes
- Pak oznacis bunky, Table > Cell > Merge

#7 peter
ja viem,že to editor vie urobiť, len by som chcel mať vlastnú jedoduchú funkciu

#8 juraj175
niečo som sa snažil a ako upraviť, aby nevznikali vedľajšie bunky?

<style>
.SizeChooser table {
  border-collapse: separate;
  border-spacing: 3px;
}

.SizeChooser td {
  cursor: pointer;
  border: 1px #ccc solid;
  height: 10px;
  min-width: 10px;
  line-height: 10px;
}

.SizeChooser-selected {
  border: 1px #333 solid !important;
}

.SizeChooser-hover {
  background-color: #DEF;
}
</style>

  		<script src="http://inzerciatop.sk/js2/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(document).ready(function(){
var columns;
 var rows;

  $('td').hover(function() {
    var n = $(this).index();
    var m = $(this).parent('tr').index();
    $('td').removeClass('SizeChooser-hover');
    $('tr').each(function(y) {
      $(this).find('td').each(function(x) {
        if (x <= n && y <= m) {
          $(this).addClass('SizeChooser-hover');
                   document.getElementById("stlpce").innerHTML =  y+1;
                      document.getElementById("riadky").innerHTML =  x+1;
           }
      })
    })
  }).click(function(){
     var table = document.getElementById ("myTable");
   	columns = $(this).index()+1;
    rows = $(this).parent('tr').index()+1;

    //      alert( table.rows[rows].cells[columns].innerHTML);
  	$('td').removeClass('SizeChooser-selected');
  	$('td.SizeChooser-hover').addClass('SizeChooser-selected');
  	  });

   $('#merge').click(function() {
  var myTable = document.getElementById('myTable');
var table = document.getElementById('myTable');
      var td = document.querySelector('td');
td.setAttribute('rowspan', rows);
td.setAttribute('colspan',columns);
spolu=rows*columns;
});
 });

</script>
</style>
<span id="riadky"></span> x <span id="stlpce"></span>tabulka<br>
<button type="button" id="merge">merge</button>


<div class="table_size_chooser">
  <div class="SizeChooser">
    <table id=myTable width=500>
      <tbody>
        <tr>
        <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
        <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr  >
          <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
              <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
                 <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
                 <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
               <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
                <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
             <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
            <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
              <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
        <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
        <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
        <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
        <tr>
        <td  class="SizeChooser-selected SizeChooser-hover">d </td>
          <td class="SizeChooser-selected SizeChooser-hover"> d</td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover">v </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> v</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
           <td  class="SizeChooser-selected SizeChooser-hover"> b</td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover">b </td>
          <td class="SizeChooser-selected SizeChooser-hover"> zzq</td>
          <td class="SizeChooser-hover SizeChooser-selected"> juraj</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
          <td class="SizeChooser-hover SizeChooser-selected"> b</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

































 
 

Jak se dari se spojovanim?

Zkusim ti vysvetlit, jak to vlastne funguje.
- Mas tabulku, treba 5x5. (cislovat to budu podle excelu, sloupce ABCD, radky 123)
- Chces spojit bunky A2 A3 B2 B3
- Musis do A2 pridat obsah ostatnich, A2 += A3 + B2 + B3 (js innerHTML, v js jquery nevim)
- Musis nastavit u A2 rowspan, colspan
- Musis smazat A3, B2, B3 (js removeChild)
Co z toho v tom kodu mas a co v nem nemas? Ani pismenko! S timhle pristupem prilis pomoci ode mne neocekavej.
- Nejdriv si zjisti, ktere bunky mas vlastne oznacene. V podstate to mas ulozene v
document.getElementById("stlpce").innerHTML = y+1;
document.getElementById("riadky").innerHTML = x+1;
[0,0] az [x,y]
colspan = x - 0;
rowspan = y - 0; // po sem to tam v podstate mas a dal?
cyklus pro j=0;j<y | cyklus i=0;i<x | vynech [0,0]; pridej do [0,0] obsah [i,j]
cyklus pro j=0;j<y | cyklus i=0;i<x | vynech [0,0]; smaz [i,j]
 

#10 peter
s zlučovaním buniek sa mi nedarí vôbec, dam si na chvíľu prestávku

No, musis uvazovat stejne, jako to delas v html 

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

<table>
  <tr>
    <td colspan=2 rowspan=2>a b c d</td>
  </tr>
</table>

a b
c d

a b c d

1. Spojis obsah vsech bunek v radcich a pak ve sloupcich a = a + b + c + d (innerHTML)
2. Nastavis spravne colSpan, rowSpan podle toho, kolik bunek slucujes na jednom radku a kolik radku slucujes.
(pozor, v js byva obvykle pro druhe slovo velke pismeno x.rowSpan ale <x rowspan="...">)
3. Odtranich bunky navic (removeChild)
Jquery nepouzivam, mozna se to tam mozna da napsat nejak inteligentneji.