关于用javascript添加一行的问题？

<HTML>
<HEAD>
<TITLE>dy_add_row</TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<LINK href="grid.css" rel=stylesheet type=text/css>
<SCRIPT language=javascript>
<!--
var firstRow=1;
function tabchange(thisObj){

var cellObj=null; 
var rowObj=null;
var tableObj=null;

var thisRowNum=0;
var thisCellNum=0;
var totalRowNum=0;
var totalCellNum=0; //get table element obj
cellObj=thisObj.parentElement;
rowObj=cellObj.parentElement;
tableObj=rowObj.parentElement.parentElement;

//get row and cell
thisRowNum=rowObj.rowIndex;
thisCellNum=cellObj.cellIndex;

//get row total and cell total
totalRowNum=tableObj.firstChild.children.length;
totalCellNum=rowObj.children.length;

//enter key
if (event.keyCode==13){
if (thisCellNum<totalCellNum-1){
tableObj.rows[thisRowNum].cells[thisCellNum+1].firstChild.focus();
tableObj.rows[thisRowNum].cells[thisCellNum+1].firstChild.select();
}else if(thisRowNum==(totalRowNum-1)){
addrow(tableObj);
}else{
//skip hidden row process
var nextRow=0;
for(var i=thisRowNum+1;i<totalRowNum;i++){
if (tableObj.rows[i].style.display=="none"){
nextRow++;
continue;
}else{
tableObj.rows[thisRowNum+1+nextRow].cells[1].firstChild.focus();
tableObj.rows[thisRowNum+1+nextRow].cells[1].firstChild.select();
break;
}
}
}
}

//left key
if (event.keyCode==37){
if (thisCellNum>1){
tableObj.rows[thisRowNum].cells[thisCellNum-1].firstChild.focus();
}

}

//up key
if (event.keyCode==38){
if (thisRowNum-firstRow>0){
var nextRow=0;
for(var i=thisRowNum;i>firstRow;i--){
if (tableObj.rows[i-1].style.display=="none"){
nextRow++;
continue;
}else{
tableObj.rows[thisRowNum-1-nextRow].cells[thisCellNum].firstChild.focus();
break;
}
}
//tableObj.rows[thisRowNum-1].cells[thisCellNum].firstChild.focus();
}
}

//right key
if (event.keyCode==39){
if (thisCellNum<totalCellNum-1){
tableObj.rows[thisRowNum].cells[thisCellNum+1].firstChild.focus();
}
}

//down key
if (event.keyCode==40){
if(thisRowNum+1!=totalRowNum){
//skip hidden row process
var nextRow=0;
for(var i=thisRowNum+1;i<totalRowNum;i++){
if (tableObj.rows[i].style.display=="none"){
nextRow++;
continue;
}else{
tableObj.rows[thisRowNum+1+nextRow].cells[thisCellNum].firstChild.focus();
tableObj.rows[thisRowNum+1+nextRow].cells[thisCellNum].firstChild.select();
break;
}
}
//tableObj.rows[thisRowNum+1].cells[thisCellNum].firstChild.focus();
}else{
addrow(tableObj);
}

}
}function addrow(tableObj){ //new row
var newRow = document.createElement('tr');
tableObj.firstChild.appendChild(newRow);

//get new row number and last time row number
var newRowNum=newRow.rowIndex;
var lastRowNum=newRowNum-1;

//how get table's cells number simple
//get all cell number
var cols=tableObj.firstChild.firstChild.children.length;

//loop copy cell html
for(i=0;i<cols;i++){
var newCell = document.createElement('td');
newRow.appendChild(newCell); //copy prev row html to new row
newCell.insertAdjacentHTML('BeforeEnd',tableObj.rows[lastRowNum].cells[i].innerHTML);

//loop change all control name
var checkNameNum=tableObj.rows[lastRowNum].cells[i].children.length;
for (var j=0;j<checkNameNum;j++){
if (isControl(tableObj.rows[lastRowNum].cells[i].children[j])){
var lastName=tableObj.rows[lastRowNum].cells[i].children[j].name;
var newName=getName(lastName);
newCell.children[j].name=newName;
//alert(newName);
}
}
}
//alert(tableObj.rows[newRowNum].innerHTML);
newRow.children[1].firstChild.focus();
newRow.children[1].firstChild.select();
}function getName(oldName){ var intSlipPos=0;
var fixStr="";
var sequenceStr="";
var newSequence=0;
var newName="";

        intSlipPos=oldName.lastIndexOf("_");  //eg:3
fixStr=oldName.substring(0,intSlipPos); //eg:"dj"
sequenceStr=oldName.substring(intSlipPos+1,oldName.length);
if (isNaN(sequenceStr)) {
sequenceStr="0";
}

newSequence=parseInt(sequenceStr)+1;

newName=fixStr+"_"+newSequence;

return newName;
}function isControl(checkObj){
if (checkObj.tagName=="INPUT" || checkObj.tagName=="SELECT" || checkObj.tagName=="TEXTAREA"){
return true;
}
return false;
}function hidden(obj){
var rowObj=obj.parentElement.parentElement;
var cellNum=rowObj.children.length;
if(confirm("Are you sure to delete?")==true){
if (rowObj.firstChild.firstChild.value=="U"){
rowObj.firstChild.firstChild.value="D";
for (var i=1;i<cellNum;i++){
rowObj.children[i].firstChild.value="";
}
}
if (rowObj.firstChild.firstChild.value=="N"){
for (var i=1;i<cellNum;i++){
rowObj.children[i].firstChild.value="";
}
}
rowObj.style.display="none"
}
}function handsubmit(formObj){ var totalCellNum=result.firstChild.children.length;
document.all.loopnum.value=totalCellNum-firstRow;

if (!typeCheck(formObj)){
return;
}
if (setFlag(formObj)){
document.test.action="index.htm";
document.test.submit();
}
}function typeCheck(checkForm){
var tableObj=checkForm.firstChild;
var totalRowNum=tableObj.firstChild.children.length;
var totalCellNum=tableObj.firstChild.firstChild.children.length;

//loop row
for (var i=firstRow;i<totalRowNum;i++){
if (tableObj.rows[i].firstChild.firstChild.value=="D"){
continue;
}

//loop cell
for (var j=1;j<totalCellNum;j++){
//alert("row:"+i+"\ncell:"+j);
if (tableObj.rows[i].cells[j].firstChild.value!=""){
//alert("this is inputed ,need to check!");
var checkType=tableObj.rows[i].cells[j].firstChild.inputtype;

//control input data check
if (controlTypeCheck(tableObj.rows[i].cells[j].firstChild,checkType)){
singleQuotesProcess(tableObj.rows[i].cells[j].firstChild);
}else{
return false;
}
}
}
}
return true;
}function controlTypeCheck(control,type){
var userInputValue=control.value;

switch (type){
case "c" :
break;
case "n" :
var tempLen=userInputValue.length;
for (var i=0;i<tempLen;i++){
var checkChar=userInputValue.charAt(i);
if (checkChar!="."){
if (isNaN(parseInt(checkChar))){
alert("input is void!");
control.focus();
control.select();
return false;
}
}
}
break;
case "d" :
break; }
return true;
}function singleQuotesProcess(control){
control.value = control.value.replace(/'/g,"''");   
}

解决方案 »

  1.   

    function setFlag(setForm){

    var tableObj=setForm.firstChild;
    var totalRowNum=tableObj.firstChild.children.length;

    for (var i=firstRow;i<totalRowNum;i++){
    var curRow=tableObj.rows[i];
    //get flag of cur row
    var flag=curRow.firstChild.firstChild.value;
    switch (flag){
    case "D" :
    break;
    case "U" :
    curRow.firstChild.firstChild.value="N";
    break;
    case "M" :
    var tempCheckEmptyValue=checkEmpty(curRow);
    if (tempCheckEmptyValue==2){
    alert("You must input!");
    curRow.children[1].firstChild.focus();
    return false;
    }
    if (tempCheckEmptyValue==3){
    return false;
    }
    curRow.firstChild.firstChild.value="U";
    break;
    case "N" :
    if (checkEmpty(curRow)==3){
    return false;
    }
    if (checkEmpty(curRow)==1){
    curRow.firstChild.firstChild.value="I";
    }
    break;
    }//end switch
    //alert("before submit:"+curRow.firstChild.firstChild.value);
    }//end for

    return true;
    }function isModify(flagObj){
    flagObj.value="M";
    }//All need is inputed return true 
    //else return false
    function checkEmpty(checkRow){
    var cellNum=checkRow.children.length;

    var needInputNum=0;
    var notInputNum=0;
    var lastcell=0;
    var lastcontrol=0;
    //loop cell
    for (var i=1;i<cellNum;i++){
    //loop control number
    for(var j=0;j<checkRow.children[i].children.length;j++){
    if (isControl(checkRow.children[i].children[j])){
    if (checkRow.children[i].children[j].needinput=="1"){
    needInputNum++;
    if (checkRow.children[i].children[j].value==""){
    notInputNum++;
    lastcell=i;
    lastcontrol=j;
    }
    }
    }
    }
    }
    if (notInputNum==0){
    //alert("this row all is input!");
    return 1;

    }else if (notInputNum==needInputNum){
    //alert("this row all not input!");
    return 2;

    }else{
    //alert("some of you input!");
    alert("You must input!");
    checkRow.children[lastcell].children[lastcontrol].focus();
    return 3;
    }

    }//-->
    </SCRIPT><META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
    <BODY bgColor=#ffffff text=#000000>
    <DIV id=Layer1 
    style="HEIGHT: 200px; OVERFLOW: scroll; POSITION: absolute; WIDTH: 500px; Z-INDEX: 1">
    <FORM method=post name=test>
    <TABLE border=0 cellPadding=0 cellSpacing=0 class=grid id=result width="100%">
      <TBODY>
      <TR bgColor=#c0c0c0>
        <TD width=30>delete</TD>
        <TD>Fabric Code </TD>
        <TD>Conposition </TD>
        <TD>Fab. width </TD>
        </TR>
      <TR>
        <TD><INPUT name=flag_1 type=hidden value=U><A href="javascript:" 
          onclick=hidden(this)>
          <CENTER><FONT color=black face=Wingdings size=4>"</FONT></CENTER></A></TD>
        <TD><INPUT name=first_1 onchange=isModify(document.all.flag_1) 
          onkeydown=tabchange(this) value=INT inputtype="c" needinput="1"> </TD>
        <TD><INPUT name=second_1 onchange=isModify(document.all.flag_1) 
          onkeydown=tabchange(this) value="COTTON 100%" inputtype="n" needinput="1"> 
        </TD>
        <TD><INPUT name=third_1 onchange=isModify(document.all.flag_1) 
          onkeydown=tabchange(this) value=55-60 inputtype="d" needinput="1"> </TD>    
          </TR>
      <TR>
        <TD><INPUT name=flag_2 type=hidden value=N><A href="javascript:" 
          onclick=hidden(this)>
          <CENTER><FONT color=black face=Wingdings size=4>"</FONT></CENTER></A></TD>
        <TD><INPUT name=first_2 onkeydown=tabchange(this) inputtype="c" 
          needinput="1"> </TD>
        <TD><INPUT name=second_2 onkeydown=tabchange(this) inputtype="n" 
          needinput="1"> </TD>
        <TD><INPUT name=third_2 onkeydown=tabchange(this) inputtype="d" 
          needinput="1"> </TD>
          </TR></TBODY>
          </TABLE>
          <INPUT name=loopnum> <INPUT name=Submit onclick=handsubmit(this.form) type=button value=Submit> 
    </FORM></DIV><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    <p>
    <input type="button" value="關閉" onclick="window.close()">
    </BODY></HTML>
      

  2.   

    只是个例子而已，希望能给你启示，你可以看microsoft的msdn library里面有关于dhtml的资料，也可以看到例子的！
      

  3.   

    <table id = "detail">
      <tr>
        <td>编号</td>
        <td>规格型号</td>
        <td>商品名称</td>
        <td>数量</td>
        <td>单位</td>
        <td>单价</td>
        <td>金额</td>
        <td><INPUT type="button" value="追加" onclick="addrow()" ></td>
      </tr>
    </table>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- function addrow() {
    var row = detail.insertRow(detail.rows.length);
    var col = row.insertCell(0);
    var i = row.rowIndex;
    col.innerHTML = '<input name="txt1" size="1">'; 
    col = row.insertCell(1); 
    col.innerHTML = '<input name="txt2" size="5">'; 
    col = row.insertCell(2); 
    col.innerHTML = '<input name="txt3" size="4">'; 
    col = row.insertCell(3); 
    col.innerHTML = '<input name="txt4" size="1">'; 
    col = row.insertCell(4); 
    col.innerHTML = '<input name="txt5" size="5">'; 
    col = row.insertCell(5); 
    col.innerHTML = '<input name="txt6" size="8">';
    col = row.insertCell(6); 
    col.innerHTML = '<input name="txt7" size="10">';
    col = row.insertCell(7);
    col.innerHTML = '<button onClick="delrow()">删除本行</button>';
    } function delrow () {
    var srcName = document.getElementsByTagName("button");
    var rowIndex = 0;
    for ( i=0;i<srcName.length;i++){
    if(srcName[i]==event.srcElement)
    rowIndex=i;
    }
    detail.deleteRow(rowIndex + 1);
    } 
    </script>