发布新日志

  • javascript 动态生成表格‏

    2009-07-06 22:15:05

    转帖:来源网络
    一次翻译技术文章,本身英语水平很烂,翻译的也是自己刚开始学习的技术,所以能勉强看懂英文的话都要尽量读 原文 而不要看我的翻译,免得被误导。阅读原文
    简介
      这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等。
    概况 - Sample1.html
      这篇文章通过实例代码介绍DOM。请从尝试下面的HTML例子开始。它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单元格组成的小表格。单元格的文字内容是:“单元格是第y行第 x列”,表示单元格在表格中的行数和列数。
    <html>
    <head>
    <title>实例代码 - 使用JavaScript和DOM创建HTML表格</title>
    <script>
    function start() {
    //获取body标签
    var mybody = document.getElementsByTagName("body")[0];

    // 创建一个<table>元素和一个<tbody>元素
    mytable = document.createElement("table");
    mytablebody = document.createElement("tbody");

    //创建所有的单元格
    for(var j = 0; j < 2; j++) {
      
    // 创建一个<tr>元素
      
    mycurrent_row = document.createElement("tr");
      
    for(var i = 0; i < 2; i++) {
      
    // 创建一个<td>元素
      
    mycurrent_cell = document.createElement("td");
      
    //创建一个文本节点
      
    currenttext = document.createTextNode("单元格是第"+j+"行,第"+i+"");
      
    // 将创建的文本节点添加到<td>里
      
    mycurrent_cell.appendChild(currenttext);
      
    // 将列<td>添加到行<tr>
      
    mycurrent_row.appendChild(mycurrent_cell);
      
    }
      
    // 将行<tr>添加到<tbody>
      
    mytablebody.appendChild(mycurrent_row);
    }
    // 将<tbody>添加到<table>
    mytable.appendChild(mytablebody);
    //将<table>添加到<body>
    mybody.appendChild(mytable);
    // 将表格mytable的border属性设置为2
    mytable.setAttribute("border", "2");
    }
    </script>
    </head>
    <body onload="start()">
    </body>
    </html>
    注意我们创建各元素和文字节点的顺序:
    1.创建< table >元素
    2.创建< table >的子元素< tbody >
    3.使用一个循环来创建< tbody >的子元素< tr >
    4.分别使用循环为每一个< tr >创建子元素< tb >
    5.为每一个< tb >创建文本节点
      创建完< table >,< tbody >,< tr >,< td >元素和文本节点,我们使用相反的顺序把它们分别添加到自己的父节点。
    1.将创建的文本节点添加到< td >里
    mycurrent_cell.appendChild(currenttext);
    2.将列< td >添加到行< tr >
    mycurrent_row.appendChild(mycurrent_cell);
    3.将行< tr >添加到< tbody >
    mytablebody.appendChild(mycurrent_row);
    4.将< tbody >添加到< table >
    mytable.appendChild(mytablebody);
    5.将< table >添加到< body >
    mybody.appendChild(mytable);
    记住这个方法。当你使用W3C DOM时会经常用到它。首先,你从上向下建立元素;然后从下向上把它们添加到父节点。
    这是JavaScript代码生成的HTML:
    ...
    <table border=5>
    <tr><td>单元格是第0行,第0列</td><td>单元格是第0行,第1列</td></tr>
    <tr><td>单元格是第1行,第0列</td><td>单元格是第1行,第1列</td></tr>
    </table>
    ...
    这是代码生成的表格元素和它的子元素的DOM对象树:
    sample1-tabledom.jpg
      你只需使用少量的DOM方法就可以构造这样一个表格和他的子元素。记住要时刻谨记你将创建的构造的模型树;这样会使编写代码更加简单。在图中的< table >树里,< table >有一个子元素< tbody >。< tbody >有两个子元素。< tbody >的每个子元素(< tr >)都有两个子元素< td >。最后,每个< td >有一个子元素:一个文本节点。  
    基本的DOM方法 - Sample2.html
      getElementByTagName方法适用于文档和元素,所以文档根对象和所有的元素对象一样有 getElementByTagName 方法。你可以使用 element.getElementsByTagName(tagname) 来获取某个元素所有子元素的列表,使用标签名选择它们。
      element.getElementsByTagName 返回一个有特定标签名的子元素的列表。你可以通过调用一个item方法(传递一个index参数给它)来从这个子元素列表中获取一个元素。请注意列表第一个子元素的index为0。下一个主题继续前面的Table例子。下面这个实例更加简单,显示了一些基本的方法:
    <html>
    <head>
    <title>实例代码 - 使用JavaScript和DOM创建HTML表格</title>
    <script>
    function start() {
    // 获取一个包含所有body元素的列表(将只有一个)
    // 然后选择列表里的第一个元素
    myBody = document.getElementsByTagName("body")[0];

    // 获取body字元素中所有的p元素
    myBodyElements = myBody.getElementsByTagName("p");

    //获取p元素列表的第二个元素(索引从0开始)
    myP = myBodyElements[1];
    }
    </script>
    </head>
    <body onload="start()">
    <p>hi</p>
    <p>hello</p>
    </body>
    </html>
    在这个例子里,我们设置myP变量为表示body里第二个p元素的DOM对象。
    1.获取一个包含所有body元素的列表
    myBody = document.getElementsByTagName("body")[0];
    因为一个有效的html文档只有一个body元素,这个列表讲只有一项。我们通过使用 [0] 选取列表的第一个元素来得到它。
    2.获取blog子元素里所有的p元素
    myBodyElements = myBody.getElementsByTagName("p");
    3.选取p元素列表的第二项
    myP = myBodyElements[1];
    sample2a2.jpg
    一旦获得一个html元素的DOM对象,你就可以设置它的属性。比如,你想设置style. background color属性,只需要添加:
    myP.style.background = "rgb(255,0,0)";
    使用document.createTextNode(”..”)创建文本节点
    使用文档对象调用createTextNode方法建立你的文本节点。你只需要输入文本内容。返回值是一个表示这个文本节点的对象。
    myTextNode = document.createTextNode("world");
    以上代码创建一个文本数据是“word”的TEXT_NODE类型(文字块)节点,变量myTextNode指向这个节点对象。你需要设置这个文本节点为其他节点元素的字节点来插入这个文本到你的html页面里。
    使用appendChild(..)插入元素
    所以,通过调用myP.appendChild([node_element]),你设置这个文本节点为第二个p元素的字节点。
    myP.appendChild(myTextNode);
    测试这个例子,注意“hello”和“world”两个词是连在一起的:“helloworld”。所以在当你看到html页面时两个文本节点 hello和world看起来好像是一个节点,而实际上在这个文档模型里有两个节点。第二个节点是一个新的TEXT_NODE类型节点,并且是第二个p标签的第二个字节点。下图在文档树里显示了刚创建的文本节点。
    sample2b2.jpg
    createTextNode和appendChild是在hello和world之间添加空格的一种简单的方法。需要特别注意的是 appendChild方法将添加在最后一个子节点后面,就像world被添加到hello后面。所以如果你想在hello和world之间添加一个文本节点需要使用insertBefore方法而不是appendChild。
  • 取得table cell

    2009-07-06 22:14:03

    var countCell=document.getElementById("table").rows.item(0).cells.length;
  • JavaScript字符串函数大全‏

    2009-07-06 22:12:52

    JavaScript字符串函数大全收藏

    JS自带函数

    concat

    将两个或多个字符的文本组合起来,返回一个新的字符串。

    var a = "hello";

    var b = ",world";

    var c = a.concat(b);

    alert(c);

    //c = "hello,world"

    indexOf

    返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1

    var index1 = a.indexOf("l");

    //index1 = 2

    var index2 = a.indexOf("l",3);

    //index2 = 3

    charAt

    返回指定位置的字符。

    var get_char = a.charAt(0);

    //get_char = "h"

    lastIndexOf

    返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1

    var index1 = lastIndexOf('l');

    //index1 = 3

    var index2 = lastIndexOf('l',2)

    //index2 = 2

    match

    检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null

    var re = new RegExp(/^\w+$/);

    var is_alpha1 = a.match(re);

    //is_alpha1 = "hello"

    var is_alpha2 = b.match(re);

    //is_alpha2 = null

    substring

    返回字符串的一个子串,传入参数是起始位置和结束位置。

    var sub_string1 = a.substring(1);

    //sub_string1 = "ello"

    var sub_string2 = a.substring(1,4);

    //sub_string2 = "ell"

    substr

    返回字符串的一个子串,传入参数是起始位置和长度

    var sub_string1 = a.substr(1);

    //sub_string1 = "ello"

    var sub_string2 = a.substr(1,4);

    //sub_string2 = "ello"

    replace

    用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。

    var result1 = a.replace(re,"Hello");

    //result1 = "Hello"

    var result2 = b.replace(re,"Hello");

    //result2 = ",world"

    search

    执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1

    var index1 = a.search(re);

    //index1 = 0

    var index2 = b.search(re);

    //index2 = -1

    slice

    提取字符串的一部分,并返回一个新字符串(与 substring 相同)。

    var sub_string1 = a.slice(1);

    //sub_string1 = "ello"

    var sub_string2 = a.slice(1,4);

    //sub_string2 = "ell"

    split

    通过将字符串划分成子串,将一个字符串做成一个字符串数组。

    var arr1 = a.split("");

    //arr1 = [h,e,l,l,o]

    length

    返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。

    var len = a.length();

    //len = 5

    toLowerCase

    将整个字符串转成小写字母。

    var lower_string = a.toLowerCase();

    //lower_string = "hello"

    toUpperCase

    将整个字符串转成大写字母。

    var upper_string = a.toUpperCase();

    //upper_string = "HELLO"

  • JavaScript的Table表格对象‏

    2009-07-06 22:10:45

    JavaScript的Table表格对象收藏
    Table表格对象 Table对象:表示HTML文档中的表,对于文档中每个标记,浏览器都创建一个Table对象.
    Table对象集合
    集合
    描述
    cells[] 获取包含表格中所有单元格的数组
    rows[] 获取包含表格中所有行的数组
    tBodies[] 获取包含表格中所有tbody的数组
    Table对象属性
    border 设置或获取表格边框
    caption 设置或获取表格标题
    cellPadding 设置或获取每个单元格边框与内容的宽度
    cellSpacing 设置或获取表格中单元格的间距
    frame. 设置或获取表格具有哪些边框
    rules 设置或获取表格中的内部边框
    summary 设置或获取表格的描述
    tFoot 获取表格的tFoot对象
    tHead 获取表格的tHead对象
    width 设置或获取表格宽度
    Table对象方法
    createCaption() 为表格创建一个空的标题元素
    createTFoot() 为表格创建一个空的tFoot元素
    createTHead() 为表格创建一个空的tHead元素
    deleteCaption() 删除表格的标题元素
    deleteRow() 删除指定的表格行
    deleteTFoot() 删除表格的tFoot元素

    deleteTHead() 删除表格的tHead元素 insertRow() 向表格中插入新行
    TableCell对象:表示HTML文档中表的单元格,对于文档中每个标记,浏览器都创建一个TableCell对象.
    TableCell对象属性
    属性
    描述
    abbr 设置或获取单元格的摘要
    align 设置或获取单元格中文字的水平对齐方向
    axis 设置或获取以逗号分隔的相关单元格组成的列表
    cellIndex 获取行单元格集合中某单元格的位置
    ch 设置或获取单元格的对齐特征
    chOff 设置或获取单元格的对齐偏移特征
    colSpan 设置或获取单元格跨越的表格列数
    headers 设置或获取以空格分表头单元格的id列表
    height 设置或获取单元格的高度
    innerHTML 设置或获取单元格标记间的HTML文本
    noWrap 设置或获取单元格是否自动换行
    rowSpan 设置或获取单元格跨越的表格行数
    scope 设置或获取与标题相关联的数据列
    vAlign 设置或获取单元格文字的垂直对齐方向
    width 设置或获取单元格的宽度
    TableRow对象:表示HTML文档中表的行,对于文档中每个标记,浏览器都创建一个TableRow对象.


    描述
    cells[] 获取表格行中所有列组成的数组
    Table对象属性
    accessKey 设置或获取该对象的快捷键
    align 设置或获取表格行中单元格中文字的水平对齐方向
    chOff 设置或获取单元格的对齐偏移特征
    colSpan 设置或获取单元格跨越的表格列数
    height 设置或获取表格行的高度
    innerHTML 设置或获取表格行标记间的HTML文本
    innerText 设置或获取表格行标记间的文本
    rowIndex 获取表格行对象在表格行集合中的位置
    sectionRowIndex 获取tBody,tHead或tFoot中,表格行对象在行集合中的位置
    tabIndex 设置或获取表格行的Tab顺序索引
    vAlign 设置或获取表格行中文字的垂直对齐方向
    width 设置或获取表格行的宽度
    Table对象方法
    blur() 取消该对象的激活状态
    click() 模拟鼠标单击该对象
    deleteCell([i]) 删除表格行中的指定的单元格
    focus() 将焦点移至表格行
    insertCell() 在表格行中插入新单元格
  • html 控件命名规范‏

    2009-07-06 22:07:26

    WebControls
    Type
    Prefix
    Example
    AdRotator
    adrt
    adrtTopAd
    Button
    btn
    btnSubmit
    Calendar
    cal
    calMettingDates
    CheckBox
    chk
    chkBlue
    CheckBoxList
    chkl
    chklFavColors
    CompareValidator
    valc
    valcValidAge
    CustomValidator
    valx
    valxDBCheck
    DataGrid
    dgrd
    dgrdTitles
    DataList
    dlst
    dlstTitles
    DropDownList
    drop
    dropCountries
    HyperLink
    lnk
    lnkDetails
    Image
    img
    imgAuntBetty
    ImageButton
    ibtn
    ibtnSubmit
    Label
    lbl
    lblResults
    LinkButton
    lbtn
    lbtnSubmit
    ListBox
    lst
    lstCountries
    Panel
    pnl
    pnlForm2
    PlaceHolder
    plh
    plhFormContents
    RadioButton
    rad
    radFemale
    RadioButtonList
    radl
    radlGender
    RangeValidator
    valg
    valgAge
    RegularExpression
    vale
    valeEmail_Validator
    Repeater
    rpt
    rptQueryResults
    RequiredFieldValidator
    valr
    valrFirstName
    Table
    tbl
    tblCountryCodes
    TableCell
    tblc
    tblcGermany
    TableRow
    tblr
    tblrCountry
    TextBox
    txt
    txtFirstName
    ValidationSummary
    vals
    valsFormErrors
    XML
    xmlc
    xmlcTransformResults
    ADO.NET
Open Toolbar