Question

你好我有一个包含按钮的分区，我想要在同一个分区内的一个表中的一个组但是当我尝试点击它们时，它们只是最后一个按钮是可用的。这是函数......

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>

Answer 1

我认为你有几个问题：

1）你错过了一个“;”从声明的最后：

$(tr).append(td)

2）你的“TBODY”元素没有结束“/ TBODY”。

3）具有“cont”的逻辑是错综复杂的，可能存在缺陷。看起来你每行只创建3个“td”元素，但我不确定..

关于代码本身，我恐怕不得不同意“Helle”，我会用以下方式编写代码：

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

我还会添加一些注释，以便更明显地使用“cont”进行操作。

此致尼尔

用javascript移动按钮的问题

1 个答案: