JSPlumb连接表行

问题描述:

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

的代码如下所示:

<!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> 

在上述例子中,我想连接名称--->名称2,年龄 - > AGE2岁和DOB - > DOB2。 是否有可能在jsPlumb或者是否有任何jquery/javascript插件来执行此操作?

在此先感谢

+0

你到目前为止做了什么!!!你确定你不想要一些PHP .. 这是不够的information.Be更精细,并提出你的问题在正确的格式!!!一些编辑 –

+0

我有做到这一点,而不是在PHP中。直到现在我已经创建了2个表格,并且我使用jsplumb插件使用addEndPoint()连接了这两个表格。现在我希望table_1中的每一行必须连接到另一个表table_2的每一行。例如,考虑table_1有3行,table_2也有3行。 – user2447666

+0

通过编辑问题发布你的代码!!!人们如何才能知道你的代码中究竟发生了什么。如果你对stackoverflow不熟悉,那么花一些时间在meta stackOverflow上,并理解如何提出问题。你将会明确地获得更多回应! –

如果我没有错,我认为你正试图使类型的节点“类”类型“节点”的内部节点。这似乎是不可能的。