Problems moving buttons with javascript
Hello i have a division that contain buttons and i want to a group in a table inside the same division but when i try to make click on them they just the last buttons are aviable to be used. This is the function...
function properties(){
//This function gives to all of the elements inside
//the widgetsCol that create the pages.
wdgBox = document.getElementById('widgetsCol');
$(wdgBox).first().before("<TABLE id='wdgTbl' border='1'><TBODY id='wdgBod'></TABLE>");
tr = document.createElement('TR');
$("#wdgBod").append(tr);
cont = 0;
$(wdgBox).children().each(function(index, elmnt){
td = document.createElement('TD');
$(tr).append(td)
$(elmnt).appendTo(td);
$(elmnt).attr('new', 'true');//Add the new attribute to the element.
makeDrag(elmnt);//And make it draggrable.
if (cont == 2){
cont = 0;
tr = document.createElement('TR');
$("#wdgBod").append(tr);
}else{
cont += 1;
}
});}
<html><head father="*html" id="header">
<title father="*head" id="ttl">KarinApp(Karina Application Web Maker)</title>
<link href="http://www.karinapp.com/favicon.ico" id="favIcon" rel="SHORTCUT ICON">
<link href="http://www.karinapp.com/modules/general/css/karinapp-style/jquery-ui-1.8.4.custom.css" id="jQueryUI" rel="Stylesheet" type="text/css">
<link father="*head" href="http://www.karinapp.com/modules/appgen/css/main.css" id="general_css" rel="stylesheet" type="text/css">
<script father="*head" id="SCRIPT1" src="http://www.karinapp.com/modules/general/scripts/jQuery.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT2" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.core.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT3" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.widget.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT4" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.mouse.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT5" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.draggable.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT6" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.droppable.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT8" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.position.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT9" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.resizable.js" type="text/javascript">\\n<!--empty--></script>
<script id="SCRIPT10" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.dialog.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT12" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.button.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT12" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.autocomplete.js" type="text/javascript"><!--empty--></script>
<script father="*head" id="SCRIPT13" src="http://www.karinapp.com/modules/general/scripts/general.js" type="text/javascript"><!--empty--></script>
<script father="*head" id="SCRIPT14" src="http://www.karinapp.com/modules/general/scripts/Catcher.js" type="text/javascript"><!--empty--></script>
<script father="*head" id="SCRIPT15" src="http://www.karinapp.com/modules/general/scripts/loadPage.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT16" language="javascript" src="http://www.karinapp.com/modules/general/scripts/editor/edit_area_full.js" type="text/javascript"><!--empty--></script>
<script father="*head" id="SCRIPT17" src="http://www.karinapp.com/modules/appgen/scripts/main.js" type="text/javascript"><!--empty--></script>
<script father="*head" id="SCRIPT18" src="http://www.karinapp.com/modules/appgen/scripts/config.js" type="text/javascript"><!--empty--></script>
<script father="*head" id="SCRIPT19" src="http://www.karinapp.com/modules/appgen/scripts/style.js" type="text/javascript"><!--empty--></script>
<script father="*head" id="SCRIPT20" src="http://www.karinapp.com/modules/appgen/scripts/scripts.js" type="text/javascript"><!--empty--></script>
<script father="*head" id="SCRIPT21" src="http://www.karinapp.com/modules/appgen/scripts/properties.js" type="text/javascript"><!--empty--></script>
<script id="SCRIPT22" type="text/javascript">
window.onload = function(){
postLoad();
}
function __init__(){
main();
}
</script>
<link type="text/css" rel="stylesheet" father="*head" id="5ads4f54adsf5_css" href="http://www.karinapp.com/modules/5ads4f54adsf5/css/main.css"></head>
<body id="general_bod" key="f5f521844f99caeb1bd3a9063a814c47aae99052">
<div father="*html" id="body" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; " pathcls="modules/5ads4f54adsf5/css/main.css:#body"><!--empty--></div>
<div class="ground_div" father="*body" id="optionsDiv" style="position: fixed; ">
<button father="@optionsDiv" id="addwdg_inp" state="open" type="button" value="Agregar componente" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Agregar componente</span></button>
<button father="@optionsDiv" id="addPg_inp" type="button" value="Guardar Pagina" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Guardar Pagina</span></button>
<button father="@optionsDiv" id="addPD_inp" type="button" value="Crear PostData" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Crear PostData</span></button>
<button father="@optionsDiv" id="addBT_inp" type="button" value="Crear Instrucciones" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Crear Instrucciones</span></button>
</div><div style="outline-width: 0px; outline-style: initial; outline-color: initial; height: auto; width: 250px; position: absolute; top: 0px; left: 1100px; display: block; z-index: 1002; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-WdgCol"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on"><span class="ui-dialog-title" id="ui-dialog-title-WdgCol" unselectable="on">Componentes Basicos</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on"><span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a></div><div class="properties_div ui-dialog-content ui-widget-content" father="*body" id="WdgCol" main="true" style="width: auto; min-height: 0px; height: 354px; ">
<label father="@WdgCol" for="container" id="cnt_lab">Contenedor:</label><select father="@properties_div" id="container"><option father="container" id="1" value="body">Body</option></select>
<table id="wdgTbl" border="1"><tbody id="wdgBod"><tr><td><button id="a" tag="a" new="true" style="position: relative; " class="ui-draggable">A</button></td><td><button id="area" tag="area" new="true" style="position: relative; " class="ui-draggable">AREA</button></td><td><button id="audio" tag="audio" new="true" style="position: relative; " class="ui-draggable">Audio</button></td></tr><tr><td><button id="base" tag="base" new="true" style="position: relative; " class="ui-draggable">BASE</button></td><td><button id="0bdo" tag="bdo" new="true" style="position: relative; " class="ui-draggable">BDO</button></td><td><button id="inp" tag="input" typ="button" new="true" style="position: relative; " class="ui-draggable">Input(Button)</button></td></tr><tr><td><button id="button" tag="button" new="true" style="position: relative; " class="ui-draggable">Button</button></td><td><button id="code" tag="code" new="true" style="position: relative; " class="ui-draggable">Code</button></td><td><button id="col" tag="col" new="true" style="position: relative; " class="ui-draggable">Column</button></td></tr><tr><td><button id="clg" tag="colgroup" new="true" style="position: relative; " class="ui-draggable">Colgroup</button></td><td><button id="dl" tag="dl" 开发者_运维百科new="true" style="position: relative; " class="ui-draggable">DL</button></td><td><button id="div" tag="div" new="true" style="position: relative; " class="ui-draggable">DIV</button></td></tr><tr><td><button id="form" tag="form" new="true" style="position: relative; " class="ui-draggable">Form</button></td><td><button id="h1" tag="h1" new="true" style="position: relative; " class="ui-draggable">H1</button></td><td><button id="img" tag="img" new="true" style="position: relative; " class="ui-draggable">Image</button></td></tr><tr><td><button id="input" tag="input" typ="checkbox" new="true" style="position: relative; " class="ui-draggable">Input(Checkbox)</button></td><td><button id="inp" tag="input" typ="file" new="true" style="position: relative; " class="ui-draggable">Input(file)</button></td><td><button id="inp" tag="input" typ="hidden" new="true" style="position: relative; " class="ui-draggable">Input(Hidden)</button></td></tr><tr><td><button id="inp" tag="input" typ="image" new="true" style="position: relative; " class="ui-draggable">Input(Image)</button></td><td><button id="inp" tag="input" typ="radio" new="true" style="position: relative; " class="ui-draggable">Input(Radio)</button></td><td><button id="input" tag="input" typ="text" new="true" style="position: relative; " class="ui-draggable">Input(Text)</button></td></tr><tr><td><button id="lbl" tag="label" new="true" style="position: relative; " class="ui-draggable">Label</button></td><td><button id="link" tag="link" new="true" style="position: relative; " class="ui-draggable">Link</button></td><td><button id="map" tag="map" new="true" style="position: relative; " class="ui-draggable">Map</button></td></tr><tr><td><button id="meta" tag="meta" new="true" style="position: relative; " class="ui-draggable">Meta</button></td><td><button id="obj" tag="object" new="true" style="position: relative; " class="ui-draggable">Object</button></td><td><button id="ol" tag="ol" new="true" style="position: relative; " class="ui-draggable">OL</button></td></tr><tr><td><button id="inp" tag="input" typ="password" new="true" style="position: relative; " class="ui-draggable">Input(Password)</button></td><td><button id="p" tag="p" new="true" style="position: relative; " class="ui-draggable">P</button></td><td><button id="pre" tag="pre" new="true" style="position: relative; " class="ui-draggable">PRE</button></td></tr><tr><td><button id="inp" tag="input" typ="reset" new="true" style="position: relative; " class="ui-draggable">Input(Reset)</button></td><td><button id="smp" tag="samp" new="true" style="position: relative; " class="ui-draggable">Samp</button></td><td><button id="srpt" tag="script" new="true" style="position: relative; " class="ui-draggable">Script</button></td></tr><tr><td><button id="sel" tag="select" new="true" style="position: relative; " class="ui-draggable">Select</button></td><td><button id="spn" tag="span" new="true" style="position: relative; " class="ui-draggable">Span</button></td><td><button id="stl" tag="style" new="true" style="position: relative; " class="ui-draggable">Style</button></td></tr><tr><td><button id="inp" tag="input" typ="submit" new="true" style="position: relative; " class="ui-draggable">Input(submit)</button></td><td><button id="tbl" tag="table" new="true" style="position: relative; " class="ui-draggable">Table</button></td><td><button id="tbody" tag="tbody" new="true" style="position: relative; " class="ui-draggable">TBody</button></td></tr><tr><td><button id="txt" tag="textarea" new="true" style="position: relative; " class="ui-draggable">TextArea</button></td><td><button id="tfoot" tag="tfoot" new="true" style="position: relative; " class="ui-draggable">TFoot</button></td><td><button id="thead" tag="thead" new="true" style="position: relative; " class="ui-draggable">THead</button></td></tr><tr><td><button id="ul" tag="ul" new="true" style="position: relative; " class="ui-draggable">UL</button></td><td><button id="var" tag="var" new="true" style="position: relative; " class="ui-draggable">Var</button></td><td><button id="video" tag="video" new="true" style="position: relative; " class="ui-draggable">Video</button></td></tr><tr></tr></tbody></table><div father="@WdgCol" id="widgetsCol">
</div>
<hr father="@WdgCol" id="hr0">
<button father="@WdgCol" id="openPal">Abrir Paleta</button>
</div><div class="ui-resizable-handle ui-resizable-n" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-w" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004; " unselectable="on"></div></div></body></html>
I think you have several problems:
1) you are missing a ";" from the end of the statement:
$(tr).append(td)
2) your "TBODY' element does not have a closing "/TBODY".
3) the logic with "cont" is convoluted and may be flawed. It looks as if you are only creating 3 "td" elements per row, but I'm not sure..
Concerning the code itself, I'm afraid I have to agree with "Helle", I would code it the following way:
function properties(){
//This function gives to all of the elements inside
//the widgetsCol that create the pages.
var wdgTr, cont = 0, wdgBox = $('#widgetsCol');
// Create the table skeleton
$(wdgBox).first().before("<table id='wdgTbl' border='1'><tbody id='wdgBod'></tbody></table>");
wdgTr = $('<tr \>').appendTo('#wdgBod');
$(wdgBox).children().each(function(index, element){
$('<td />').append($(element)).appendTo(wdgTr);
$(element).attr({new: 'true'}); // Add the new attribute to the element
makeDrag(element); // Make it draggable
if (cont != 2) {cont++;} else {cont = 0; wdgTr = $('<tr \>').appendTo(wdgBod);}
});
}
I would also add a few comments to make it more obvious what you are doing with "cont".
Regards Neil
加载中,请稍侯......
精彩评论