Yahoo! UI LibraryのDataTable変換で指定したイベント属性が消える
Yahoo! UI LibraryのDataTableを使ってウェブページを実装しています。
HTMLのtableタグ内のあるtd要素に
onclick属性を指定してJavaScriptで仕掛けを組んでいますが
Yahoo! UIのDataTableに変換すると、このイベント属性が無効になってしまいます。
テーブルの変換が行われるタイミングで
独自に指定した属性はなかったことになってしまうのでしょうか。
最終的にやりたいことは、テーブルの行をクリックしたら
そこに設定されているデータをpostして次画面に遷移する、ということなんですが
実際のページはApache Wicketを使って実装しているので、
Wicket側で実装したonclickメソッド内でデータを取得したいと思っています。
Yahoo! UIから提供されているDOM操作メソッドを使って
クリックイベントを拾えば、何とかやりたいことができそうな気がするのですが
それ以外に何か方法があれば伝授してもらえないでしょうか。
以下にサンプルソースを載せます。
よろしくお願いします。
--------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/datatable/assets/skins/sam/datatable.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/json/json-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/get/get-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/datatable/datatable-min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="myMarkedUpContainer">
<table id="myTable">
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
<th>CCC</th>
</tr>
</thead>
<tbody>
<tr>
<td onclick="window.alert();">1</td> ←★このonclickが消えてしまう
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>3</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("myTable"));
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = {
fields: [{
key: "AAA",
parser: "number"
}, {
key: "BBB"
}, {
key: "CCC"
}]
};
var myColumnDefs = [{
key: "AAA"
}, {
key: "BBB"
}, {
key: "CCC"
}];
var myDataTable = new YAHOO.widget.DataTable("myMarkedUpContainer", myColumnDefs, myDataSource);
});
});
</script>
</body>
</html>
--------------------------------------------------
お礼
遅くなり、すみませんでした ありがとうございました！