Question

我有2个表5行数据，我想将table_1的每一行连接到table_2。我可以连接这两个表，但不能将table_1的每一行连接到table_2。

以下代码：

<!doctype html>
    <html>
            <head>
                    <title>Example</title>
                    <meta http-equiv="content-type" content="text/html;charset=utf-8" />    
                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
                    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
                    <script type="text/javascript" src="http://jsplumb.org/js/1.3.1/jquery.jsPlumb-1.3.1-all-min.js"></script>

            </head>
            <body >
            <div id="block1"  class ="node" style="position: absolute;">
                    <table id="table_1" style="border:2px solid #000;float:left;margin-right:9%;" >
                <tr>
                    <th>Drag Line 1<hr />
                    </th>
                </tr>
                <div class ="class"><tr>
                    <!--<td><input type="checkbox" value="checkbox"></td -->
                    <td style="font-size: 12px; font-weight: normal; family-font: Arial; color: red;">Name                      </td>
                </tr></div>                     
                <tr>
                    <!--<td><input type="checkbox" value="checkbox"></td-->
                    <td style="font-size: 12px; font-weight: normal; font-family: Arial; color: red;">Age                                   </td>
                </tr>
                <tr>
                    <!--<td><input type="checkbox" value="checkbox"></td -->
                    <td style="font-size: 12px; font-weight: normal; font-family: Arial; color: red;">DOB                       </td>
                </tr>
            </table>
        </div>
            <div  id="block2"  class ="node" style="position: absolute;">
                    <table id="table_2" style="border:2px solid #000;float:left;margin-right:9%;" >
                <tr>
                    <th>Drag Line 2<hr />
                    </th>
                </tr>
                <tr>
                    <!--<td><input type="checkbox" value="checkbox"></td -->
                    <td style="font-size: 12px; font-weight: normal; family-font: Arial; color: red;">Name2                         </td>
                </tr>
                <tr>
                    <!--<td><input type="checkbox" value="checkbox"></td -->
                    <td style="font-size: 12px; font-weight: normal; font-family: Arial; color: red;">Age2                      </td>
                </tr>
                <div class ="class"><tr>
                    <!--<td><input type="checkbox" value="checkbox"></td -->
                    <td style="font-size: 12px; font-weight: normal; font-family: Arial; color: red;">DOB2                      </td>
                </tr></div>
            </table>
        </div>
        <script type="text/javascript">
            var rowCount = $('#table_1 tr').length;
                    var sourceColor = "#000000";
                    var sourceOption = 
            {
                        anchor:"RightMiddle",
                            isSource:true,
                            isTarget:false,
                            endpoint:["Rectangle",{width:10, height:10}],
                            paintStyle:{fillStyle:"#66FF00"},
                maxConnections:-1
                }                                             
                    var targetOption = 
            {
                        anchor:"LeftMiddle",
                            endpoint:["Dot", {radius:3}],
                            paintStyle:{fillStyle:"#FFEF00"},
                paintStyle:{ fillStyle:sourceColor},
                isSource:false,
                isTarget:true,
                maxConnections:-1
            }

                    jsPlumb.bind("ready", function() {
                    jsPlumb.addEndpoint($('.node'), sourceOption);
                        jsPlumb.addEndpoint($('.node'), targetOption);
                        jsPlumb.draggable($('.node'));
                    });
                    </script>
            </body>
    </html>

在上面的示例中，我想连接Name ---＆gt; Name2，Age - ＆gt; Age2和DOB - ＆gt; DOB2。是否有可能在jsPlumb中或者是否有任何jquery / javascript插件来执行此操作？

提前致谢

Answer 1

如果我没有错，我认为您正在尝试在“node”类型的节点内创建类型为“class”的节点。这似乎是不可能的。

JSPlumb连接表行

1 个答案: