Autor Zpráva
juraj
Profil
Zdravím
Ako zistím šírku tabulky, keď do divu vložím napr dve tabuľky z popup okna,
Keď kliknem na prvú tabuľku tak šírku mi zobrazí v poriadku, ale ked kliknem napríklad na druhú tabuľku
tak šírku mi správne nezobrazí ukážka je tu
Tento kód je v index.php
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <head>
        <title</title>
<script>
function tabulky() {

 var myWindow = window.open("tabulky.php", "myWin", "width=800,height=400,toolbar=no,menubar=no,scrollbars=yes");
   // dataitem1 = window.open("tabulky.php",
   //"dataitem1", "width=800,height=400,toolbar=no,menubar=no,scrollbars=yes");
  myWin.document.getElementById("demo").innerHTML="Hey you!!";
}
function zisti() {
   alert("sirka tabulkz je: " + $("table").width());
}
</script>
    </head>
<body>  
<a href="#"  onclick="tabulky()">tabulky</a>

<div    contenteditable="true"  style="outline:none;  width: 500px; height:500px;   margin: 0px;margin-top: 10px;margin-left:100px;
   overflow: auto;   border:1px solid black;" id="textBox"  onclick ="zisti()"> 
 </div>
    </body>
</html>
a druhý kód sa nachádza v stranka.php
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <style>
  #resizable { width: 150px; height: auto; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  </style><div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">tabulka</h3>
      <script>

function myFunction(HTML) {
    var myTableDiv = opener.document.getElementById("textBox");
   var riadky;
   var stlpce;
      var border;
      var stlpce = document.getElementById("stlpce").value;
   var riadky = document.getElementById("riadky").value;
      var border= document.getElementById("border").value;       
      
    if (opener && !opener.closed){
    if (riadky != null ) {
        
 /*    opener.document.getElementById('textBox').innerHTML =     opener.document.getElementById('textBox').innerHTML+riadky;
       opener.document.getElementById('textBox').innerHTML =     opener.document.getElementById('textBox').innerHTML+stlpce;
       opener.document.getElementById('textBox').innerHTML =     opener.document.getElementById('textBox').innerHTML+border;
       */

          var zarovnattabulku = document.getElementById("zarovnattabulku");
          
       zarovnattabulkuu = zarovnattabulku.value;
        

 
  var cellspacing= document.getElementById("cellspacing");
       cellspacingu = cellspacing.value;
       
         var cellpadding= document.getElementById("cellpadding");
      cellpaddingu = cellpadding.value;
       
   
       
 var border;
 var border = document.getElementById("border").value;
  var farbaramceka;
 var farbaramceka = document.getElementById("farbaramceka").value;

        
           var width= document.getElementById("width");
                  widthu = width.value;

          var height= document.getElementById("height");
                  heightu = height.value;
       
       
  /*    var HTML = "<table border=1  align=" + zarovnattabulkuu+ "  style='border:1px solid red;'  >";
     for(r=1;r<=riadky;r++)
{
  HTML +=   " <tr>";

for(j=1;j<=stlpce;j++)
{

HTML +="<td  width=40 height=20>";
HTML +="</td>";
}
HTML += "</tr>"}
HTML +="</table>&nbsp";
opener.document.getElementById("textBox").innerHTML = HTML;*/



    var table = opener.document.createElement('TABLE' );


 // table.style='border: 1px solid grey';
      
  
   
  //  table.style ="border:1px solid #99CC00;cellspacing:" ;
 

  //  var alltogether = farbaramceka + ' ' + cellpadding + ' ' + cellspacing;



    



table.setAttribute('cellpadding',cellpaddingu);
table.setAttribute('cellspacing',cellspacingu);
table.setAttribute('bordercolor',farbaramceka);
table.setAttribute('align',zarovnattabulkuu);
table.setAttribute('border',border);
table.setAttribute('width',widthu);
table.setAttribute('height',heightu);



   var tableBody = opener.document.createElement('TBODY');
    table.appendChild(tableBody);
    for (var i = 0; i < riadky ; i++) {
      var tr = opener.document.createElement('TR');
        tableBody.appendChild(tr);
          for (var j = 0; j < stlpce; j++) {
            var td = opener.document.createElement('TD');

            td.width = '40';
            td.height = '20';


          // td.style.backgroundColor = "red";

           //************************************************
           // td.setAttribute("onclick", "yourFun(this)");

            tr.appendChild(td);
        }
    
    }
  myTableDiv.appendChild(table);
    myTableDiv.appendChild( document.createTextNode( '\u00A0' ) );//na konci tabulky prida nbsp
      window.close();  
    }
}}

</script>

   riadky <input type="text" id="riadky" value="3"><br>
     stlpce <input type="text" id="stlpce" value="2"><br>
   border <input type="text" id="border" value='1'><br>
     sirka <input type="text" id="width" value='200'><br>
         vyska <input type="text" id="height" value='200'><br>
     farba ram4eka <input type="text" id="farbaramceka" value='0'><br>
      cellpadding <input type="text" id="cellpadding" value="2"><br>
            cellspacing <input type="text" id="cellspacing" value="2"><br>
ZAROVNANIE
 <select id="zarovnattabulku" >
  <option value="links">VLAVO</option>
  <option value="center">Na stred</option>
  <option value="right">vpravo</option>
</select> 
</div>
  <a href="#" onclick="myFunction()">odoslat</a>
juraj
Profil
už som si to zistil sám
Str4wberry
Profil
Můžete napsat jak? Mohlo by se to hodit případným budoucím návštěvníků tohoto vlákna.
juraj
Profil
Str4wberry:
Len keby sa to dalo trochu vylepšiť

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <style type="text/css">p {background-color: yellow;}</style>
<script>
function tabulky() {

 var myWindow = window.open("tabulky.php", "myWin", "width=800,height=400,toolbar=no,menubar=no,scrollbars=yes");
   // dataitem1 = window.open("tabulky.php",
   //"dataitem1", "width=800,height=400,toolbar=no,menubar=no,scrollbars=yes");
  myWin.document.getElementById("demo").innerHTML="Hey you!!";
}

window.onload = function () {

$(document).on("click", "#textBox", function(){
  $('table').click(function () {
  $("#textBox").find('table').each(function() { 
    var tagName = (this.tagName).toLowerCase();
    if(tagName=='table'){
                  document.getElementById("demopt").innerHTML =ef ;
var ef=$("#textBox table").index(this);
//var fe=($('table:eq('+ef+')').css('width'));//v pixeloch
//var fe=($('table:eq('+ef+')').css('width'));//v pixeloch
var fe=$('table:eq('+ef+')').width();
  document.getElementById("demopt").innerHTML =fe;
  alert(fe)
}
})

}) 
});
};
</script>
</head>
<body>
<p id="sirka"></p>
<a href="#"  onclick="tabulky()">tabulky</a>
<p id="demo"></p><p id="demopt"></p><p id="pocett"></p>
<div    contenteditable="true"  style="outline:none;  width: 500px; height:500px;   margin: 0px;margin-top: 10px;margin-left:100px;
   overflow: auto;   border:1px solid black;" id="textBox" > 
    </div>
</body>
</html>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0