Fatal编程技术网

Javascript JSPlumb连接表行

javascript jquery html

Javascript JSPlumb连接表行,javascript,jquery,html,jsplumb,Javascript,Jquery,Html,Jsplumb,我有两个表，其中有5行数据，我想将表1的每一行连接到表2。 我可以连接这两个表，但无法将表1的每一行连接到表2 代码如下所示： <!doctype html> <html> <head> <title>Example</title> <meta http-equiv="content-type" content="tex

我有两个表，其中有5行数据，我想将表1的每一行连接到表2。 我可以连接这两个表，但无法将表1的每一行连接到表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>


例子
拖动线1

名称
年龄
出生日期
拖动线2

姓名2
年龄2
DOB2
var rowCount=$（'#table_1 tr'）。长度；
var sourceColor=“#000000”；
var sourceOption=
{
主播：“右中”，
来源：是的，
isTarget:错，
端点：[“矩形”{宽度：10，高度：10}]，
画风：{fillStyle:#66FF00}，
maxConnections:-1
}                                             
var目标选项=
{
主播：“左中”，
端点：[“点”{半径：3}]，
画风：{fillStyle:#FFEF00}，
paintStyle:{fillStyle:sourceColor}，
来源：错，
isTarget:没错，
maxConnections:-1
}
bind（“ready”，function（））{
jsPlumb.addEndpoint（$（'.node'），sourceOption）；
jsPlumb.addEndpoint（$（'.node'），targetOption）；
jsPlumb.draggable（$（'.node'））；
});
在上面的示例中，我想连接Name-->Name2、Age-->Age2和DOB-->DOB2。 在jsPlumb中是否可能，或者是否有任何jquery/javascript插件来执行此操作

提前感谢

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

到目前为止你做了什么！！！你确定你不想要一些php吗。。这不是足够的信息。请更加详细，并以适当的格式提出您的问题！！！是时候做一些编辑了，我用html而不是php。到目前为止，我已经创建了两个表，并且正在使用jsplumb插件使用addEndPoint（）连接这两个表。现在我希望表1中的每一行都必须连接到另一个表2的每一行。例如，考虑表1 1有3行，表2也有3行。通过编辑问题发布您的代码！！！人们将如何知道你的代码中实际发生了什么。如果你是stackoverflow新手，那么花一些时间在meta stackoverflow上，并了解如何提问。你肯定会得到更多的回复！！！