我有 2 个表 5 行数据，我想将 table_1 的每一行连接到 table_2。我可以连接这 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--->Name2 、 Age-->Age2 和 DOB-->DOB2。在 jsPlumb 中是否有可能，或者是否有任何 jquery/javascript 插件来执行此操作？
提前致谢