使用 JavaScript 将行和控件追加到表格元素

• 下载源代码 - 2.27 KB

引言

本文档解释了如何动态地在 HTML 表格元素中添加行和控件。能够使用 JavaScript 在网页中添加或附加行和表单控件非常有用。例如，当我们需要一个按钮来添加包含表单控件的多个新行时。我发现让用户通过单击按钮动态添加 HTML 控件来添加/编辑多个记录非常有帮助。行和控件将在无需刷新页面的情况下添加，并且信息将使用 AJAX 更新到数据库中。使用此代码非常简单。它只是 HTML 和 JavaScript 的组合。在链接或按钮的 onclick 事件中，调用 JavaScript AppendRow() 函数，它将在页面中动态添加控件。

用于添加行和控件的 Javascript

所需的代码已附在本文章中。单击按钮时调用 AppedRow() 函数。在示例中，我使用 JavaScript 在新添加的行中添加了文本框、复选框和下拉控件。

AppendTD() 函数用于在新创建的行中添加单元格。

function AppendTD()
{
    var td = document.createElement("td");
    td.className='';
    td.setAttribute("height", "24px");
    return td;
}

获取网页中已创建的表格元素的引用，并将行附加到引用的表格元素中。

function AppendRow()
{
    var tblObj = document.getElementById('mainTable');
    var tblBody = tblObj.childNodes;
    var ttlRows = tblBody[0].childNodes.length;
    var index = ttlRows;
    var cellHTML = "";
    var tr = document.createElement('tr');
        
    //adding first column
    var td = AppendTD();
    //adding checkbox to first column
    var chk = document.createElement('input');
    chk.setAttribute("id", "chk"+index);
    chk.setAttribute("name", "chk"+index);
    chk.setAttribute("type", "checkbox");
    td.appendChild(chk);
    tr.appendChild(td);
       
    //adding second column
    var td = AppendTD();
    //adding text box
    cellHTML = '<input type="text" class="txtboxcommon" id="txt'+
               index+'1" name="txt'+index+'1" />';
    td.innerHTML = cellHTML;
    tr.appendChild(td);
            
    var td = AppendTD();
    var sel = document.createElement('select');

    sel.setAttribute("id", "dd"+index+"1");
    sel.setAttribute("name", "dd"+index+"1");
    sel.className='';

    var opt0 = document.createElement("option");
    var t0 = document.createTextNode("Yes");
    opt0.setAttribute("value", "1");
    opt0.appendChild(t0);
    sel.appendChild(opt0);

    var opt1 = document.createElement("option");
    var t1 = document.createTextNode("No");
    opt1.setAttribute("value", "2");
    opt1.appendChild(t1);
    sel.appendChild(opt1);
            
    td.appendChild(sel);
    tr.appendChild(td);
       
    tblBody[0].appendChild(tr);
    return false;
}

这是我在 CodeProject 上的第一篇文章。我把它当作一次冒险，因为在撰写任何文章之前，我首先对其进行测试，并且它也增加了我的知识。