MACCA认为分享就是乐趣

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
JAVASCRIPT：希望能给他人一些帮助

　　以下的样例参考了　JAVASCRIPT 宝典（第四版）　JavaScript 权威指南(第三版)　和一些网上的搜索资料

页面增加表，增加/删除　行、表头、表尾、表描述
<script language="javascript">
function init()
{
   theTable=(document.all)?document.all.myTable:document.getElementById("myTable");
   theTableBody=theTable.tBodies[0];
}
function appendRow(form)
{
  insertTableRow(form,-1);
}
function addRow(form)
{
  insertTableRow(form,form.insertIndex.value);
}
function insertTableRow(form,where)
{
  var now=new Date();
  var nowData=[now.getHours(),now.getMinutes(),now.getSeconds(),now.getMilliseconds()];
  clearBGColors();
  var newCell
  var newRow=theTableBody.insertRow(where);
  for(var i=0;i<nowData.length;i++)
  {
    newCell=newRow.insertCell(i);
 newCell.innerHTML=nowData[i];
 newCell.style.backgroundColor="salmon";
  }
  updateRowCounters(form);
}
function removeRow(form)
{
  theTableBody.deleteRow(form.deleteIndex.value);
  updateRowCounters(form);
}
function insertTHEAD(form)
{
  var THEADData=["Hours","Minutes","Seconds","Milliseconds"];
  var newCell
  var newTHEAD=theTable.createTHead();
  newTHEAD.id="myTHEAD";
  var newRow=newTHEAD.insertRow(-1);
  for(var i=0;i<THEADData.length;i++)
  {
    newCell=newRow.insertCell(i);
    newCell.innerHTML=THEADData[i];
  }
  updateRowCounters(form);
  form.addTHEAD.disabled=true;
  form.deleteTHEAD.disabled=false;
}
function removeTHEAD(form)
{
  theTable.deleteTHead();
  updateRowCounters(form);

  form.addTHEAD.disabled=false;
  form.deleteTHEAD.disabled=true;
}
function insertTFOOT(form)
{
  var TFOOTData=["Hours","Minutes","Seconds","Milliseconds"];
  var newCell
  var newTFOOT=theTable.createTFoot();
  newTFOOT.id="myTFOOT";
  var newRow=newTFOOT.insertRow(-1);
  for(var i=0;i<TFOOTData.length;i++)
  {
    newCell=newRow.insertCell(i);
 newCell.innerHTML=TFOOTData[i];
  }
  updateRowCounters(form);
  form.addTFOOT.disabled=true;
  form.deleteTFOOT.disabled=false;
}
function removeTFOOT(form)
{
   theTable.deleteTFoot();
   updateRowCounters(form);
   form.addTFOOT.disabled=false;
   form.deleteTFOOT.disabled=true;
}
function insertCaption(form)
{
  var captionData=form.captionText.value;
  var newCaption=theTable.createCaption();
  newCaption.innerHTML=captionData;
  form.addCaption.disabled=true;
  form.deleteCaption.disabled=false;
}
function removeCaption(form)
{
  theTable.deleteCaption();
  form.addCaption.disabled=false;
  form.deleteCaption.disabled=true;
}
function updateRowCounters(form)
{
  var sel1=form.insertIndex;
  var sel2=form.deleteIndex;
  sel1.options.length=0;
  sel2.options.length=0;
  for(var i=0;i<theTableBody.rows.length;i++)
  {
    //sel1.option[i]=new Option(i,i);
 //sel2.option[i]=new Option(i,i);
  }
  form.removeRowBtn.disabled=(i==0);
}
function clearBGColors()
{
  for(var i=0;i<theTableBody.rows.length;i++)
  {
    for(var j=0;j<theTableBody.rows[i].cells.length;j++)
 {
   theTableBody.rows[i].cells[j].style.backgroundColor="";
 }
  }
}
</script>
<body onload="init();">
<form name="controls" method="post" action="">
<fieldset>
<legend>ADD/REMOVE Rows</legend>
   <table name="table9" width="800" border="2" cellspacing="0" cellpadding="0" >
   <tr>
   <td><input name="bt1" type="button" value="Append 1 Row" onclick="appendRow(this.form);"> </td>
    <td><input type="button" value="Insert 1 Row" onclick="addRow(this.form);">
   <select name="insertIndex">
   <option value="0">0
   </select></td>
   <td><input type="button" name="removeRowBtn" value="Delete 1 Row" disabled onclick="removeRow(this.form);">
   <select name="deleteIndex">
   <option value="0">0
   </select>
   </td>
   </tr>
   </table>
</fieldset>
<fieldset>
<legend>ADD/Remove THEAD AND TFOOT</legend>
<TABLE WIDTHE="90%" CELLSPACING="10">
<TR><TD><input type="button" name="addTHEAD" value="Insert THEAD" onclick="insertTHEAD(this.form);"><br>
<input type="button" name="deleteTHEAD" VALUE="Remove THEAD" disabled onClick="removeTHEAD(this.form);" bgcolor="red"></TD>
<TD><br><br><input type="button" name="addTFOOT" value="Insert TFOOT" onclick="insertTFOOT(this.form);"><br><input type="button" name="deleteTFOOT" VALUE="Remove TFOOT" disabled onClick="removeTFOOT(this.form);"></TD></TR>
</TABLE>
</fieldset>
<fieldset>
<legend>ADD/Remove Caption</legend>
<TABLE WIDTHE="80%" CELLSPACING="5">
<TR><TD><input type="button" name="addCaption" value="Add Caption" onclick="insertCaption(this.form);"></TD>
<TD>Text:<input type="text" name="captionText" size="40" value="Sample Caption"></TD>
<TD><input type="button" name="deleteCaption" value="Delete Caption" disabled onclick="removeCaption(this.form);">
</TD></TR>
</TABLE>
</fieldset>
<Table id="myTable" cellpadding="5" border="3">
</table>
</form>
</body>
</html>

更改页面的TITLE
　　页面TITLE是<script>document.write(document.title);document.title="JScript1"</script>,现在已赋新值为"JScript"

window.status状态栏
　　<input type="button" name="buttonClick" value="状态栏" onMouseOver="window.status='window status has been changed!';return true;" onMouseOut="window.status='';return true;">　

详细遍历页面元素,Document()放入任何页面中都可用
<script language="javascript">
function Document()
{
   document.form7.newRadio.checked=true;
   document.form7.doc1.value=document.getElementsByTagName("form").length;
   FROMS.innerText="";
   for(var i=0;i<document.getElementsByTagName("form").length;i++)
   {  
     FROMS.innerText+="\rNAME OF FROM ["+parseInt(i+1)+"] IS:"+document.getElementsByTagName("form")(i).name; 
     var ementsnum=document.getElementsByTagName("form")(i).elements;
     FROMS.innerText+="\r "+document.getElementsByTagName("form")(i).name+" HAS "+ementsnum.length+"  ELEMENTS IS: "
    for(var j=0;j<ementsnum.length;j++)
    {
      var element=document.getElementsByTagName("form")(i).elements[j];
      FROMS.innerText+="\r"+parseInt(j+1)+" type is :"+element.type;
      FROMS.innerText+="\r Name is :"+element.name;
      if(element.value=="") element.value="空";
      FROMS.innerText+="\r Value is :"+element.value;
    }
}
</script>　
<form  name="form7" method="post" action="">
   <table width="800" border="0" cellspacing="0" cellpadding="0">
   <tr><td><input name="doc1" type="text" value="点击后循环读取FORM信息" onclick="Document();"/>
   <input type="radio" name="newRadio" value="new"/><input name="doc2" type="text" value="" onclick="Document();"/>
</td></tr>   
<tr><td><SPAN ID="FROMS"></SPAN>需要此SPAN显示
</td></tr>  
</table>
</form>

SELECT属性相关运用
function Select()
{ 
   var object=document.all.select2;
   objoption=object.options;
   alert("1.长度为"+object.length+" 2.选择第"+(object.selectedIndex+1)+"项\n"+"3.该SELECT选项默认被选中？"+objoption[object.selectedIndex].defaultSelected+"\n 4.现在是否被选中？"+objoption[object.selectedIndex].selected+"\n 5.该选中项的VALUE :"+objoption[object.selectedIndex].value+"\n 6.该选中项的TEXT :"+objoption[object.selectedIndex].text+"\n 7.SELECT.VALUE:"+object.value);
   object.size="5";//size为显示的条数
}
</script>
<select name="select2" value="select" size="5" onChange="Select();">
<option value="1" >one
<option value="2" >two
<option value="3" >three
<option value="4" selected>four
<option value="5" >FIVE
</select>

posted on 2007-04-09 10:55  MACCA  阅读(479)  评论(2)    收藏  举报