ボタンをクリックして HTML テーブルに行を動的に追加しようとしています。
私のテーブルには、HTML5 datalist 要素を持つ列があります。ページがデフォルトの最初の行で最初にロードされたときに、データリストにドロップダウン値が表示されます。
しかし、ボタンによって追加されたすべての新しい行に対して、データリストは機能しません。以下は、行を追加しているテーブルと JavaScript です。JavaScript の innerHTML は、IE の datalist 要素に対して機能していないようです。HTML5 要素に対して innerHTML を機能させるための回避策はありますか?
HTML:
<input type="button" value="Add Row" onclick="javascript:addRow('dataTable')">
<input type="button" value="Delete Row" onclick="javascript:deleteRow('dataTable')">
<table id="dataTable" name="dataTable" border="1" WIDTH="1240">
<col width="40">
<col width="100">
<tr>
<th>Select</th>
<th>Column4</th>
</tr>
<tbody>
<tr>
<td WIDTH="40">
<input type="checkbox" name="Select">
</td>
<td WIDTH="100">
<input type='text' list='Column4' id='element_10' style='display:table-cell; width:100%'>
<datalist id='Column4'>
<!--[if !IE]><!-->
<select>
<!--<![endif]-->
<option label='' value=''>
<option label='' value='Datalist1'>
<option label='' value='Datalist2'>
<!--[if !IE]><!-->
</select>
<!--<![endif]-->
</datalist>
<script>
$(document).ready(function() {
$('input[list]').datalist();
});
</script>
</td>
</tr>
</tbody>
</table>
JavaScript:
function addRow(tableID){
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
var row=table.insertRow(rowCount);
var colCount=table.rows[1].cells.length;
for(var i=0;i<colCount;i++)
{
var newcell=row.insertCell(i);
newcell.innerHTML=table.rows[1].cells[i].innerHTML;
switch(newcell.childNodes[0].type)
{
case"text":newcell.childNodes[0].value="";break;
case"checkbox":newcell.childNodes[0].checked=false;break;
case"select-one":newcell.childNodes[0].selectedIndex=0;break;
}
}
}
function deleteRow(tableID)
{
try{
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
for(var i=0;i<rowCount;i++)
{
var row=table.rows[i];
var chkbox=row.cells[0].childNodes[0];
if(null!=chkbox&&true==chkbox.checked)
{
if(rowCount<=1)
{
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);rowCount--;i--;}
}
}
catch(e)
{
alert(e);
}
}