Dynamické zlučovanie buniek v tabuľke

25. 2. 2016 14:03:26

Zdravím

vie niekto poradiť, ako upraviť kód, keď si vyberiem ľubovolné množstvo riadkov a stlpcov, aby nevznikali vedľajšie bunky?

Ďakujem,pripajám kód

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

$('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.cells.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>

25. 2. 2016 14:03:26

https://webtrh.cz/diskuse/dynamicke-zlucovanie-buniek-v-tabulke#reply1177867

crs

(1 hodnocení)

27. 2. 2016 04:27:56

Kód pro sloučení buněk dle označení.

$('#merge').click(function() {            for (y = 0; y < rows; y++) {                mergedContent = '';                for (x = 0; x < columns; x++) {                    mergedContent += $('#myTable tr:nth-child('+(y+1)+') td:nth-child('+(x+1)+')').html();                }                $('#myTable tr:nth-child('+(y+1)+') td:first')                    .html(mergedContent)                    .removeClass('SizeChooser-selected')                    .attr('colspan', columns);                $('#myTable tr:nth-child('+(y+1)+') td.SizeChooser-selected').remove();            }            mergedContent = '';            for (y = 0; y < rows; y++) {                mergedContent += '<br>' + $('#myTable tr:nth-child('+(y+1)+') td:first').html();                if (y) {                    $('#myTable tr:nth-child('+(y+1)+') td:first').remove();                }            }            $('#myTable td:first')                .html(mergedContent.substr(4))                .attr('rowspan', rows);        });

Funguje u zatím nesloučených buněk. Pro manipulaci s již sloučenými nebo částečně sloučenými buňkami komplexita kódu patřičně naroste, protože se musí počítat i jejich atributy colspan a rowspan.

27. 2. 2016 04:27:56