如何删除表格中间插入行
- JScript code
function addRow(obj) {
var num = obj.value; //num是提交的件数
var beginRow = obj.parentElement.parentElement.rowIndex;
var theTable = document.getElementById("fillTbl");
var dRow = document.getElementsByTagName("tr");
//alert(dRow.length);
if (dRow.length>0) {
for (var j=0; j <dRow.length; j++) {
if ("addCls" == dRow[j].name||"addClass" == dRow[j].className) {
theTable.deleteRow(dRow[j].rowIndex);
}
}
}
dRow = document.getElementsByTagName("td");
if (dRow.length>0) {
for (j=0; j <dRow.length; j++) {
if ("addCls" == dRow[j].name) {
theTable.deleteRow(dRow[j].parentElement.rowIndex);
}
}
}
dRow = document.getElementsByTagName("font");
if (dRow.length>0) {
for (j=0; j <dRow.length; j++) {
if ("addCls" == dRow[j].name) {
theTable.deleteRow(dRow[j].parentElement.parentElement.rowIndex);
if ("tr" == dRow[j].parentElement.parentElement.parentElement.tagName) {
//alert(dRow[j].parentElement.parentElement.parentElement.tagName);
theTable.deleteRow(dRow[j].parentElement.parentElement.parentElement.rowIndex);
}
}
}
}
var cellidx;
var newCell;
var newRow;
if (num>1) {
for (var i=num; i>=1; i--) {
// append new row to the end of the table
newRow = theTable.insertRow(beginRow+1); //theTable.rows.length);
// give the row its own ID
newRow.id = newRow.uniqueID;
newRow.name = "addCls"; // 为了修改件数可以删除添加的行，我用addCls作为name识别
newRow.className = "addClass"; //同样是为了删除下面添加的行，因为有2行就是删不掉
cellidx=0;
// an inserted row has no cells, so insert the cells
newCell = newRow.insertCell(cellidx);
newRow.bgcolor="#E7EDF5";
newRow.colspan="5";
// give this cell its own id
newCell.name = "addCls";
// display the row’s id as the cell text
newCell.align="center";
newCell.colspan="5";
newCell.bgcolor="#E7EDF5";
newCell.innerHTML = " <font name='addCls' color='#2D486C'>第"+i+"件的信息 </font>";
newRow = theTable.insertRow(beginRow+2); //theTable.rows.length);
newRow.className = "addClass";
newRow.id = newRow.uniqueID;
newRow.name = "addCls";
cellidx = 0;
newCell = newRow.insertCell(cellidx);
newCell.name = "addCls";
newCell.innerHTML =" <img src='image/weight.jpg'>";
cellidx++;
newCell = newRow.insertCell(cellidx);
newCell.name = "addCls";
newCell.innerHTML =" <input type='text' name='weightPart[]'>";
cellidx++;
newCell.TagName = "td";
newCell = newRow.insertCell(cellidx);
newCell.name = "addCls";
newCell.innerHTML =" <img src='image/volume.jpg'>";
cellidx++;
newCell = newRow.insertCell(cellidx);
newCell.name = "addCls";
newCell.colspan = "2";
newCell.innerHTML =" <input size='36' type='text' name='volPart[]'>";
newRow = theTable.insertRow(beginRow+3); //theTable.rows.length);
newRow.className = "addClass";
newRow.id = newRow.uniqueID;
cellidx = 0;
newRow.name = "addCls";
newCell = newRow.insertCell(cellidx);
newCell.name = "addCls";
newCell.innerHTML =" <img src='image/descriptionEn.jpg'>";
cellidx++;
newCell = newRow.insertCell(cellidx);
newCell.name = "addCls";
newCell.innerHTML =" <input type='text' name='dEnPart[]'>";
cellidx++;
newCell = newRow.insertCell(cellidx);
newCell.name = "addCls";
newCell.id = newCell.uniqueID;
newCell.innerHTML =" <img src='image/descriptionChn.jpg'>";
cellidx++;
newCell = newRow.insertCell(cellidx);
newCell.name = "addCls";
newCell.colspan = "2";
newCell.innerHTML =" <input size='36' type='text' name='dChnPart[]'>";
}
}
}
选了9件，再改成2件，这样的话，后7件的填写框就要删除。但有2行就是删不掉，显示为：“第4件的信息”和“第8件的信息”这2行删不掉。请高手解决。调试通过给分。JS或AJAX实现都可以，3Q。
以下的行有2行删不掉。
- JScript code
newRow = theTable.insertRow(beginRow+1); //theTable.rows.length); // give the row its own ID newRow.id = newRow.uniqueID; newRow.name = "addCls"; newRow.className = "addClass"; cellidx=0; // an inserted row has no cells, so insert the cells newCell = newRow.insertCell(cellidx); newRow.bgcolor="#E7EDF5"; newRow.colspan="5"; // give this cell its own id newCell.name = "addCls"; // display the row’s id as the cell text newCell.align="center"; newCell.colspan="5"; newCell.bgcolor="#E7EDF5"; newCell.innerHTML = "<font name='addCls' color='#2D486C'>第"+i+"件的信息</font>";
HTML页面代码：
- HTML code
<form name="form1" method="post" action="insert.php"><table border="1" cellspacing="0" id="fillTbl"><tr> <td><img src="image/destination.jpg"></td> <td><input name="destination" type="text" id="destination" value="<?PHP if (1==$label){ echo mysql_result($result,0,"destination"); } ?>"></td> <td><font size=2>是否一票多件(如果是请选择件数,并填写每件的信息)</font></td> <td colspan="2"><input type="radio" name="mul" id="mulY" value="Yes"> <label for="mulY">Yes</label> <input type="radio" name="mul" id="mulN" value="No" checked> <label for="mulN">No</label><font size=2 color="#CC3366"> 件数：</font> <select name="pNum" onchange="addRow(this)"> <option value="1" selected>1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </td></tr><tr><td>这里还有几行，插入的行在中间位置，所以不能从表格末尾删除。</td></tr></table>
[解决办法]
从最大值开始倒着删
[解决办法]
用一个变量rowinsert记录刚才插入的行数，然后删除的时候从第一行开始删除指定刚才插入的数量rowinsert即可．
更好点的算法就是判断当前要插入是大于刚才的数字还是小于，大于的话从第rowinsert+1开始插入num-rowinsert行．小于的话从num+１删除rowinsert-num行
[解决办法]
用一个变量rowinsert记录刚才插入的行数，然后删除的时候从第一行开始删除指定刚才插入的数量rowinsert即可．
更好点的算法就是判断当前要插入是大于刚才的数字还是小于，大于的话从第rowinsert开始插入num-rowinsert行．小于的话从num删除rowinsert-num行
由于row集合下标从０开始的所以不用加１的。
[解决办法]
theTable.innerText=""就能删除所有行了
[解决办法]
这个简单的，使用一个中间变量的或者使用COOKIE
[解决办法]
中间变量保存上一次选的值，然后利用新的值与该中间变量比较
[解决办法]
一个全局变量
[解决办法]
学习!
[解决办法]
- JScript code
[Quote=引用:]select的选择值改变，如何记录上一次选的值呢？如果知道就好办，大家出出主意，3Q[/Quote]你在页面定义一个变量就可以了．var rowinsert=0;function addRow(obj) { var num = obj.value; //num是提交的件数 var beginRow = obj.parentElement.parentElement.rowIndex; var theTable = document.getElementById("fillTbl"); var dRow = document.getElementsByTagName("tr"); insertrow = num - rowinsert//取得要插入或删除的行数 rowinsert = num //记录新选择的值供下次使用 if(insertrow==0)return //如果没变化则返回 if(insertrow<0){ //小于0即删除，则从num开始删除Math.abs(insertrow)行 for(i=num;i<(num+Math.abs(insertrow));i++) theTable.deleteRow(i) }else{ //大于0即插入,从num-insertrow开始插入insertrow行 for(i=num-insertrow;i<num;i++) //执行插入 }}