表与jQuery appendTo

Question

我想用这些span和一个href来创建 table 。必须只有一个tr和3 td。

java.lang.ClassCastException: PlateauColorLine cannot be cast to javax.swing.JPanel
at PlateauColorLine.mouseDragged(PlateauColorLine.java:299)
at java.awt.Component.processMouseMotionEvent(Component.java:6564)
at java.awt.Component.processEvent(Component.java:6285)
at java.awt.Container.processEvent(Container.java:2229)
at java.awt.Window.processEvent(Window.java:2022)
at java.awt.Component.dispatchEventImpl(Component.java:4872)
at java.awt.Container.dispatchEventImpl(Container.java:2287)
at java.awt.Window.dispatchEventImpl(Window.java:2719)
at java.awt.Component.dispatchEvent(Component.java:4698)
at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:747)
at java.awt.EventQueue.access$300(EventQueue.java:103)
at java.awt.EventQueue$3.run(EventQueue.java:706)
at java.awt.EventQueue$3.run(EventQueue.java:704)
at java.security.AccessController.doPrivileged(Native Method)
at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:77)
at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:87)
at java.awt.EventQueue$4.run(EventQueue.java:720)
at java.awt.EventQueue$4.run(EventQueue.java:718)
at java.security.AccessController.doPrivileged(Native Method)
at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:77)
at java.awt.EventQueue.dispatchEvent(EventQueue.java:717)
at org.GNOME.Accessibility.AtkWrapper$5.dispatchEvent(AtkWrapper.java:697)
at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:242)
at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:161)
at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:150)
at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:146)
at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:138)
at java.awt.EventDispatchThread.run(EventDispatchThread.java:91)

我希望看到我喜欢的HTML;

updater: function (selectedCustomer) {
      valueAccessor()( parseInt(selectedCustomer.split('-')[0]));
        if (valueAccessor()() > 0) {
           $(element).hide();
        var txt = $('<span>' + selectedCustomer + '</span>').appendTo($(element).parent());
        var openCust = $('<a href="javascript: void(0)" type="submit"style=" margin-top: 7pt;"><i class="icon-search" style="font-size: 14pt; color: #000000;"></i></a>').appendTo($(element).parent());
        var btn = $('<a href="javascript: void(0)" type="submit"style=" margin-top: 7pt;"><i class="icon-remove" style="font-size: 14pt; color: #000000;"></i></a>').appendTo($(element).parent());
        btn.on("click", function () {
            $(element).show();
            txt.remove();
            btn.remove();
            openCust.remove();
            valueAccessor()(0);
          })
          openCust.on("click", function () {
             OpenCustomer(valueAccessor()());
          })
       }
      //  OpenCustomer(selectedCustomer);
     }
 });

如何将 table，tr，td 标记添加到我的代码中？

谢谢，

Answer 1

我试着把它作为一个简单的例子，这样你就可以看到我如何首先实例化新元素，然后操纵，发送文本，链接等等。最后我用jQuery附加它...

var ah = $('<a/>')
var sp = $('<span/>')
var td = $('<td/>')
var tr = $('<tr/>')
    tr.append( td.clone().append( ah ).attr('href', '#').text('Link text') )
    tr.append( td.clone().append( sp ).text('Lorem Ipsum') )
    tr.append( td.clone().append( sp ).text('New Lorem Ipsum') )
var tb = $('<table/>').append(tr)
// append to body or some other element :)
$('body').append( tb )

http://codepen.io/mkdizajn/pen/BQgEWQ?editors=0110

hth，k

Answer 2

我喜欢这样做：创建不同的组件，例如span，a with hrefs等，然后附加到

<table id="theTable">
    <tr></tr>
</table>


var mySpan = "<span>What i want in it</span>";
var firstLink = "<a href='"+what ever i want here+"'>The other bits in here</a>";
var secondLink = "<a href='foo'>All the other stuff</a>";

$("body").on("click", ".myButton", function(){
    $("#myTable tr").empty();
    $("#theTable tr").append("<td>"+mySPan+"</td><td>"+firstLink+"</td><td>"+secondLink+"</td>");
});

这种简单的方法通常有效。