我有html代码,可以在第一次加载时呈现表格。
在单选按钮事件上重绘表的回调在运行时会产生两个错误。
TypeError:docInstance.getElementById不是函数
TypeError:document.getElementById(...)为null
由于我删除了自定义界面,因此代码是部分的。
Html代码
<div id = "mytableanchor1" class="mytableanchor1"></div>
<div id = "mytableanchor2" class="mytableanchor2"></div>
<table>
<th>Select radio button:</th>
<tr>
<td>
<input type="radio" name="button1" value="1" checked>1
<input type="radio" name="button1" value="2">2
</td>
</tr>
</table>
Javascript函数
<script>
function GetView(data)
{
var view = new google.visualization.DataView(data);
return view;
}
function RenderTable(data, elementId, docInstance)
{
var gdatatable = new google.visualization.DataTable();
..
// initialize gdatatable with custom colors for cells using data
..
// anchor the table at given html element
var table = new google.visualization.Table (docInstance.getElementById(elementId));
// draw the table
table.draw(GetView(gdatatable), {showRowNumber: true/*some settings*/});
}
首先加载javascript代码
var global_data;
var global_buttonValue = '1';
...
...
global_data = data;
// pass document instance
RenderTable(global_data,'mytableanchor1', document);
...
...
无法正常工作的Javascript回调代码
function DocumentReady()
{
// pass document instance
$(document).on('click', "input[name=button1]", RenderTableCallback($(document)));
}
// using closure scope to pass document instance as param to callback
// read about it here http://www.jstips.co/en/javascript/passing-arguments-to-callback-functions/
function RenderTableCallback(docInstance)
{
return function() {
global_buttonValue = $(this).val();
..
// modify global_data using global_buttonValue
..
// now render global_data in table
RenderTable(global_data,'mytableanchor1', docInstance);
}
}
</script>
=======
修复是在函数DocumentReady()
中使用document而不是$(document)