有个问题,现在通过js向建立动态表格。
我现在有两个input按钮,一个是add element,还有一个是delete element
每当我点击这个add按钮的时候,就自动创建一个表格中的一行中一列,不如第一行的第一列,而不是只创建第一行,
当我在点击add按钮的时候,创建第一行的第二列,一次类推。当创建到第一行第4裂的时候,在点击add按钮的时候就创建第二行第一列这个元素。一次类推,delete按钮则是反之。每次创建时都在表格中有个checkbox这样delete就是删除我所选中的checkbox这样的代码怎么写呢??谢谢各位大虾
我现在有两个input按钮,一个是add element,还有一个是delete element
每当我点击这个add按钮的时候,就自动创建一个表格中的一行中一列,不如第一行的第一列,而不是只创建第一行,
当我在点击add按钮的时候,创建第一行的第二列,一次类推。当创建到第一行第4裂的时候,在点击add按钮的时候就创建第二行第一列这个元素。一次类推,delete按钮则是反之。每次创建时都在表格中有个checkbox这样delete就是删除我所选中的checkbox这样的代码怎么写呢??谢谢各位大虾
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<table id="edtable" border="1">
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td></tr>
</table>
<input type="button" id="addbtn" value="addCol" />
<input type="button" id="delbtn" value="delCol" />
<script type="text/javascript">
document.getElementById('addbtn').onclick=function(){
var et=document.getElementById('edtable');
var row_length=et.rows.length;
var last_rows_cols=et.rows[row_length-1].cells.length;
var operation_cols=et.rows[row_length-1];
if(last_rows_cols == 4){
//创建tr
operation_cols=et.insertRow(row_length);
}
var newAddCol_index=0
if(last_rows_cols != 4){
newAddCol_index = last_rows_cols;
}
var newAddCol = operation_cols.insertCell(newAddCol_index);
newAddCol.appendChild(document.createTextNode("New JS Col"));
};document.getElementById('delbtn').onclick=function(){
var et=document.getElementById('edtable');
var row_length=et.rows.length;
var last_rows_cols=et.rows[row_length-1].cells.length;
et.rows[row_length-1].deleteCell(last_rows_cols-1);
};
</script>
</body>
</html>
re:
是删除checkbox?还是checkbox选中的列?
删除车checkbox。因为对应table中的每个td都有一个checkbox。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<table id="edtable" border="1">
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td></tr>
</table>
<input type="button" id="addbtn" value="addCol" />
<input type="button" id="delbtn" value="delCol" />
<script type="text/javascript">
document.getElementById('addbtn').onclick=function(){
var et=document.getElementById('edtable');
var row_length=et.rows.length;
var last_rows_cols=et.rows[row_length-1].cells.length;
var operation_cols=et.rows[row_length-1];
if(last_rows_cols == 4){
//创建tr
operation_cols=et.insertRow(row_length);
}
var newAddCol_index=0
if(last_rows_cols != 4){
newAddCol_index = last_rows_cols;
}
var newAddCol = operation_cols.insertCell(newAddCol_index);
var cke = document.createElement("input");
//type
var cke_Att_t=document.createAttribute("type");
cke_Att_t.value="checkbox";
cke.setAttributeNode(cke_Att_t);
//name
var cke_Att_n=document.createAttribute("name");
cke_Att_n.value="cellCK";
cke.setAttributeNode(cke_Att_n);
newAddCol.appendChild(cke);
//newAddCol.appendChild(document.createTextNode("New JS Col"));
};document.getElementById('delbtn').onclick=function(){
var et=document.getElementById('edtable');
//var row_length=et.rows.length;
//var last_rows_cols=et.rows[row_length-1].cells.length;
//et.rows[row_length-1].deleteCell(last_rows_cols-1);
var tdCellCK=et.getElementsByTagName('input');
for(var i=0;i<tdCellCK.length;i++){
if(tdCellCK[i].checked){
//找到该checked所在的td,tr
var tdCellCK = tdCellCK[i].parentNode;
tdCellCK.parentNode.removeChild(tdCellCK);
}
}
};
</script>
</body>
</html>