web前端知识

4.表格与表单



4.1 动态添加行



<script language=”javascript”>



window.onload=function(){



    var oTr = document.getElementById(“member”).insertRow(2);    //插入一行



    var aText = new Array();



    aText[0] = document.createTextNode(“fresheggs”);



    aText[1] = document.createTextNode(“W610″);



    aText[2] = document.createTextNode(“Nov 5th”);



    aText[3] = document.createTextNode(“Scorpio”);



    aText[4] = document.createTextNode(“1038818″);



    for(var i=0;i<aText.length;i++){



        var oTd = oTr.insertCell(i);



        oTd.appendChild(aText[i]);



    }



}



</script>



 



4.2修改单元格内容



<script language=”javascript”>



window.onload=function(){



    var oTable = document.getElementById(“member”);



    oTable.rows[3].cells[4].innerHTML = “lost”;        //修改单元格内容



}



</script>



 



4.3 动态删除



parentElement是IE dom，



parentNode是标准DOM



 



<script language=”javascript”>



window.onload=function(){



    var oTable = document.getElementById(“member”);



    oTable.deleteRow(2);        //删除一行，后面的行号自动补齐//指从table中的第2行开始进行删除



    oTable.rows[2].deleteCell(1);    //删除一个单元格，后面的也自动补齐



}



</script>



 



<script language=”javascript”>



function myDelete(){



    var oTable = document.getElementById(“member”);



    //删除该行



    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);



}



window.onload=function(){



    var oTable = document.getElementById(“member”);



    var oTd;



    //动态添加delete链接



    for(var i=1;i<oTable.rows.length;i++){



        oTd = oTable.rows[i].insertCell(5);



        oTd.innerHTML = “<a href=’#’>delete</a>”;



        oTd.firstChild.onclick = myDelete;    //添加删除事件



    }



}



</script>



 



4.4动态删除列



<script language=”javascript”>



function deleteColumn(oTable,iNum){



    //自定义删除列函数，即每行删除相应单元格



    for(var i=0;i<oTable.rows.length;i++)



        oTable.rows[i].deleteCell(iNum);



}



window.onload=function(){



    var oTable = document.getElementById(“member”);



    deleteColumn(oTable,2);



}



</script>



 



4.5 控制textarea的字符个数



<script language=”javascript”>



function LessThan(oTextArea){



    //返回文本框字符个数是否符号要求的boolean值



    return oTextArea.value.length < oTextArea.getAttribute(“maxlength”);



}



</script>