html创建选择,HTML/CSS：是否可以创建一个可以选择其列的表？

对的，这是可能的。

使用YUI datatable。它甚至可以与JQuery一起使用。

虽然此示例使用行选择，但您可以使用列选择

您可以使用任何输入格式，包括JSON，HTML表格，XML和文本。无需输入字段。我喜欢这样的感觉

App http://img74.imageshack.us/img74/1833/singled.gif

根据以上所述，当我单击(是，鼠标单击)单行时，它将突出显示(选中)并将应用支持的操作(编辑)。将根据您的业务需求应用支持的操作

在您的情况下，您根据(您可以根据需要进行测试)设置HTML表：

首先让我们设置CSS和JavaScript

.center {text-align:center;}

我们的身体(在服务器端生成)

AAABBBCCCHIDDEN

abc0abc1abc2

Edit row

现在让我们在身体后配置脚本(代码注释)

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");

}

});

})();