它還挺很難解釋我想實現（和隨意修改標題，如果你能想到的一個更好的）是什麼，所以我給你舉個例子：HTML/CSS：是否可以創建一個可以選擇其列的表？
Street: First Lane
South side 28
City: Duckburg
Country: Disneyland
ZIP: 1234567890-XY
這是我希望用戶看到。但是我也希望用戶只能選擇正確的列，所以他可以在其他地方複製粘貼它的內容。如果我使用表執行此操作，用戶只能選擇整行，而複製粘貼操作也會複製行標題。如果我用兩個彼此相鄰的獨立容器做這件事，如果某件物品有多條線，則標籤與內容不同步。
這可以以某種方式實現嗎？
是的。嘗試這樣的事情：
<!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個單元格中顯示所有示例的右列？那樣它將全部一起選擇。
只要地址各部分的行數始終相同，行標題就會保持對齊。
你是否同意克魯爾的回答？如果是這樣，請查看我的評論。 OMGG！ –
是的，這是可能的。
使用YUI datatable。它甚至與JQuery一起工作。
雖然此示例使用行選擇，你可以使用列選擇
你可以使用任何的輸入格式，包括JSON，HTML表格，XML和文本。無需輸入字段。我用somenting像
App http://img74.imageshack.us/img74/1833/singled.gif
根據上述，當我點擊（是的，鼠標點擊）單行，它將被突出顯示（選擇），並支持操作將應用於（編輯）。
首先讓建立CSS和JavaScript
：支持的操作將根據您的業務需求在你的情況下應用，HTML表格，您可以根據（您可以測試，如果你想）成立
<!-- 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。
關於，
OMFG！所有這一切都是爲了一個微型的HTML格式的電子郵件，否則將只有一行文本！ O_O我會通過，謝謝！ –
您可以擴展Yahoo datatable以設置特定功能。這是一個強大的組件，可以在主題是HTML表格時解決任何問題。我成功地使用它。 –
它確實看起來很強大，我相信很多人會覺得這個答案有用。 :) –
如果沒有應用可視化CSS，這就變成了無稽之談。任何以線性方式處理數據的東西（例如搜索引擎或屏幕閱讀器）都會在任何地址到達之前依次獲取標籤。 – Quentin
對我而言，這兩者都不重要 - 這是針對HTML格式的電子郵件。如果谷歌得到索引這，這將意味着一個嚴重的安全漏洞。 ：D但是，這種方式需要我檢查每個項目，看看它有多少行。當然可能，但我寧願更優雅的東西。 –
電子郵件更可能以線性方式閱讀 - 人們仍然使用屏幕閱讀器進行電子郵件，人們以純文本模式查看電子郵件，電子郵件客戶端通常對CSS等的支持不佳等。 – Quentin