单击添加新行时，我希望出现一个日期选择器日历，我尝试使用 jquery easy ui 但是当我单击 datepicjker id 字段时，它没有触发下面的代码。
<style type="text/css" title="currentStyle">
@import "demo_page.css";
@import "demo_table.css";
td input { width: 100% }
#example_wrapper { min-height: 0; }
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
这是javascript代码
function restoreRow ( oTable, nRow )
{
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for ( var i=0, iLen=jqTds.length ; i<iLen ; i++ ) {
oTable.fnUpdate( aData[i], nRow, i, false );
}
oTable.fnDraw();
}
function editRow ( oTable, nRow )
{
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" value="'+aData[0]+'">';
jqTds[1].innerHTML = '<input type="text" id="datepicker" value="'+aData[1]+'">';
jqTds[2].innerHTML = '<input type="text" value="'+aData[2]+'">';
jqTds[3].innerHTML = '<input type="text" value="'+aData[3]+'">';
jqTds[4].innerHTML = '<input type="text" value="'+aData[4]+'">';
jqTds[5].innerHTML = '<a class="edit" href="">Save</a>';
}
function saveRow ( oTable, nRow )
{
var jqInputs = $('input', nRow);
oTable.fnUpdate( jqInputs[0].value, nRow, 0, false );
oTable.fnUpdate( jqInputs[1].value, nRow, 1, false );
oTable.fnUpdate( jqInputs[2].value, nRow, 2, false );
oTable.fnUpdate( jqInputs[3].value, nRow, 3, false );
oTable.fnUpdate( jqInputs[4].value, nRow, 4, false );
oTable.fnUpdate( '<a class="edit" href="">Edit</a>', nRow, 5, false );
oTable.fnDraw();
}
$(document).ready(function() {
var oTable = $('#example').dataTable();
var nEditing = null;
$('#new').click( function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData( [ '', '', '', '', '',
'<a class="edit" href="">Edit</a>', '<a class="delete" href="">Delete</a>' ] );
var nRow = oTable.fnGetNodes( aiNew[0] );
editRow( oTable, nRow );
nEditing = nRow;
} );
$('#example a.delete').live('click', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );
} );
$('#example a.edit').live('click', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if ( nEditing !== null && nEditing != nRow ) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow( oTable, nEditing );
editRow( oTable, nRow );
nEditing = nRow;
}
else if ( nEditing == nRow && this.innerHTML == "Save" ) {
/* Editing this row and want to save it */
saveRow( oTable, nEditing );
nEditing = null;
}
else {
/* No edit in progress - let's start one */
editRow( oTable, nRow );
nEditing = nRow;
}
} );
} );
</script>
</head>
和html表
<body id="dt_example">
<div id="container">
<div id="demo">
<p><a id="new" href="">Add new row</a></p>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Date</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>23rd june</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
<td><a class="edit" href="">Edit</a></td>
<td><a class="delete" href="">Delete</a></td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>3rd june</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
<td><a class="edit" href="">Edit</a></td>
<td><a class="delete" href="">Delete</a></td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>3rd june</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
<td><a class="edit" href="">Edit</a></td>
<td><a class="delete" href="">Delete</a></td>
</tr>
</tbody>
</table>
</div>