有点难以解释我想要实现的目标（如果你能想到更好的话，可以随意修改标题），所以我给你举个例子：
Street: First Lane
South side 28
City: Duckburg
Country: Disneyland
ZIP: 1234567890-XY
这是我希望用户看到的内容。但我也希望用户能够只选择正确的列，这样他就可以将其内容复制粘贴到别处。如果我使用表格执行此操作，则用户只能选择整行，并且复制粘贴操作也会复制行标题。如果我使用两个彼此相邻的独立容器执行此操作，则如果某个项目有多行，则标签与内容不同步。
这可以通过某种方式实现吗？
答案 0 :(得分：1)
是。尝试这样的事情：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
#left_side { float: left; text-align: right;}
</style>
</head>
<body>
<div id="container">
<div id="left_side">
Street:<br><br>
City:<br>
Country:<br>
ZIP:
</div>
<div id="right_side">
First Lane<br>
South side 28<br>
Duckburg<br>
Disneyland<br>
1234567890-XY
</div>
</div>
</body>
</html>
答案 1 :(得分：1)
是的，这是可能的。
使用YUI datatable。它甚至可以与JQuery一起使用。
虽然此示例使用行选择，但您可以使用列选择
您可以使用任何输入格式，包括JSON，HTML表格，XML和文本。无需输入字段。我像
一样使用somentingApp http://img74.imageshack.us/img74/1833/singled.gif
根据上述内容，当我单击（是，鼠标单击）单行时，将突出显示（选中）并应用支持的操作（编辑）。将根据您的业务需求应用支持的操作
在您的情况下，您根据（您可以根据需要进行测试）设置HTML表：
首先让我们设置CSS和JavaScript
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.7.0/build/paginator/assets/skins/sam/paginator.css&2.7.0/build/datatable/assets/skins/sam/datatable.css">
<style type="text/css">
.center {text-align:center;}
</style>
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/connection/connection-min.js&2.7.0/build/element/element-min.js&2.7.0/build/paginator/paginator-min.js&2.7.0/build/datasource/datasource-min.js&2.7.0/build/datatable/datatable-min.js&2.7.0/build/json/json-min.js"></script>
我们的身体（在服务器端生成）
<body class="yui-skin-sam">
<div id="container">
<table id="source">
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
<th>CCC</th>
<th>HIDDEN</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>0</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>1</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<div id="actionContainer">
<a id="action" href="#">Edit row</a>
</div>
</body>
现在让我们在主体（代码注释）
之后配置脚本<script type="text/javascript">
var settings = {
widgetList:{
reference:null,
datatable:{
columnSettings:[
// key attribute matches key attribute in dataSource fields attribute - see bellow
{key:"AAA", label:"A custom label"},
// if label is omitted, default to key value
// className customizes a class to apply to a column
{key:"BBB", className:"center"},
{key:"CCC"},
// i do not want to show id value, so i hide it through hidden attribute
{key:"HIDDEN", hidden:true},
// i want to generate a custom value regardless dataSource, so i set up a custom formatter function - see below
{key:"CUSTOM", label:"A custom value", formatter:customValue}
],
settings:{
selectionMode:"single"
}
}, // eof datatable
dataSource:{
// use $("#source")[0] whether you use JQuery (do not forget set up JQuery)
// source points to data that will populate our datatable
// in our case data will be retrieved from a HTML table
// see responseType bellow
source:YAHOO.util.Dom.get("source"),
settings:{
responseSchema:{
fields:[
// key attribute matches th content
{key:"AAA"},
{key:"BBB"},
{key:"CCC"},
{key:"HIDDEN"}],
// set up input
responseType:YAHOO.util.DataSource.TYPE_HTMLTABLE
}
}
}, // eof dataSource
create:function() {
this.reference = new YAHOO.widget.DataTable("container", this.datatable.columnSettings, new YAHOO.util.DataSource(this.dataSource.source, this.dataSource.settings), this.datatable.settings);
} // eof create
} // eof widgetList
}; // eof setting
// sets up custom value
function customValue(container, record, column, data) {
// container references a cell
container.innerHTML = record.getData("AAA") + " - " + record.getData("BBB") + " - " + record.getData("CCC") + " - " + record.getData("HIDDEN");
}
(function() {
// use $("#actionContainer").set("display", "none"); in JQuery
YAHOO.util.Dom.setStyle("actionContainer", "display", "none");
settings.widgetList.create();
// RIA applications
YAHOO.util.Event.addListener("action", "click", function(e) {
e.preventDefault();
var datatable = settings.widgetList.reference;
var recordArray = datatable.getRecordSet().getRecords();
for(var i = 0; i < recordArray.length; i++) {
if(datatable.isSelected(recordArray[i])) {
alert("You have selected id: " + recordArray[i].getData("HIDDEN") + "\nYou can use a JQuery dialog to collect data changes");
}
}
});
// rowClickEvent - use subscribe
settings.widgetList.reference.subscribe("rowClickEvent", function(args) {
// args.target is a Record instance
if(this.isSelected(args.target)) {
this.unselectRow(args.target);
YAHOO.util.Dom.setStyle("actionContainer", "display", "none");
} else {
this.unselectAllRows();
this.selectRow(args.target);
YAHOO.util.Dom.setStyle("actionContainer", "display", "block");
}
});
})();
</script>
</html>
如果使用JSON，XML或文本，则需要进行最小的更改。随意问他们。
为了使用列选择，请使用columnClickEvent。
的问候，
答案 2 :(得分：0)
你能不能以一个单元格的方式拥有你的例子的所有右栏？这样就可以一起选择。
只要地址的每个部分中的行数始终相同，行标题就会保持对齐。