Ako zlúčiť bunky po označení myšou – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

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

 
Hledat
Rozšířené hledání ›
Nejnovější témata ve fóru
16:45, HTML / XHTML Anti-kukíkový zákon
16:26, Assembler šachový program
22:06, Startupy Megastroj.cz – Vše na jednom místě: půjčovna, bazar a inze…
21:17, Inzerce FPGA vývojová deska XILINX VIRTEX 5 ML507
20:59, OS - GNU / Linux Ubuntu a OpenSuse
21:47, Offtopic Digitalizace v Česku
Stavba Laser Arény
Laser Game Brno

›

juraj1750
Návštěvník
15. 2. 2016   #1
-
0
-

   

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;
Nahlásit jako SPAM
IP: 88.212.36.–
peter
~ Anonymní uživatel
4016 příspěvků
16. 2. 2016   #2
-
0
-

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]

Nahlásit jako SPAM
IP: 2001:718:2601:26c:f868:5a...–
juraj175
~ Anonymní uživatel
60 příspěvků
16. 2. 2016   #3
-
0
-

#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

Nahlásit jako SPAM
IP: 88.212.36.–
peter
~ Anonymní uživatel
4016 příspěvků
17. 2. 2016   #4
-
0
-

 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>
Nahlásit jako SPAM
IP: 2001:718:2601:26c:c8a8:28...–
juraj175
~ Anonymní uživatel
60 příspěvků
17. 2. 2016   #5
-
0
-

#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

Nahlásit jako SPAM
IP: 88.212.36.–
peter
~ Anonymní uživatel
4016 příspěvků
17. 2. 2016   #6
-
0
-

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

Nahlásit jako SPAM
IP: 2001:718:2601:26c:c8a8:28...–
peter
~ Anonymní uživatel
4016 příspěvků
17. 2. 2016   #7
-
0
-
Nahlásit jako SPAM
IP: 2001:718:2601:26c:c8a8:28...–
juraj175
~ Anonymní uživatel
60 příspěvků
17. 2. 2016   #8
-
0
-

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

Nahlásit jako SPAM
IP: 88.212.36.–
juraj175
~ Anonymní uživatel
60 příspěvků
19. 2. 2016   #9
-
0
-

#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>
Nahlásit jako SPAM
IP: 88.212.36.–
peter
~ Anonymní uživatel
4016 příspěvků
25. 2. 2016   #10
-
0
-

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]
 

Nahlásit jako SPAM
IP: 2001:718:2601:26c:7cd1:a7...–
juraj175
~ Anonymní uživatel
60 příspěvků
25. 2. 2016   #11
-
0
-

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

Nahlásit jako SPAM
IP: 88.212.36.–
peter
~ Anonymní uživatel
4016 příspěvků
29. 2. 2016   #12
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:d1d3:8c...–
 ← Zpět na seznam vláken  ← Zpět do Fóra
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
 Zdrojový kód  Vložit obrázek  Video  Smajlíci
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 15 hostů

Podobná vlákna

Kliknutie myšou — založil mylan4

.NET

Vymena obrazkov po prejdeni mysou — založil elo

CSS

Symulacia pohybu myšou alebo stlačenia tlačidla na klavesnicy — založil paloS_1

C / C++

Změna adresy buňky — založil Pavel

Visual Basic

[DB] - vybrání jedné buňky — založil kyrgistánec

PHP

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 2003–2024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý