JS实现动态添加表格行

zhang_13245768 2009-04-02 04:38:21

在页面上点击按钮弹出模式对话框，选择数据然后返回物料编号，要求生成1行9列形式的如下
<tr>
<td>这里显示序号</td>
<td>这里显示物料编号()</td>
<td>这里显示物料名称</td>
<td>这里显示规格</td>
<td>这里生成一个文本框，文本框里显示单位</td>
<td>这里生成一个文本框，文本框里可以输入数量</td>
<td>这里生成一个文本框，文本框里可以输入单价</td>
<td>这里根据上面输入的数量*单价去计算总额</td>
<td>这里生成一个文本框，文本框里可以填写备注</td>
</tr>
最好有实际的代码或例子，先谢谢了

...全文

443 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

erytbc 2009-04-03

打赏
举报

qq2013 2009-04-03

打赏
举报

强

zglover 2009-04-03

打赏
举报

lz你要先熟悉掌握DHTML中的元素，这个才是关键啊！

cansum396 2009-04-03

打赏
举报



function onGridContral(Obj, Rows, Cols, HidCol) {

    if (ReturnStatus() == 'Norma') {

        return false;

    }

    event.keyCod = 0;

    Rows = event.srcElement.parentElement.parentElement.rowIndex;

    var Grid = document.getElementById('Dg_PO');

    switch (Obj.id) {

        case "Item":

            {



                if (EndRow == 1) {

                    EndRow = 0;

                }

                else {

                    onItemClick(Obj, Rows);

                }

                break;

            }

        case "QTY":

            {

                if (IsInteger(Obj.value) == false) {

                    Obj.focus();

                    alert('请输入正确的数量！');

                    return false;

                }

                if (IsPlusNumeric(Grid.rows[Rows].cells[ReturnRowObj("PRICE", Rows, Grid)].firstChild.value) == true) {

                    Grid.rows[Rows].cells[ReturnRowObj("AMOUNT", Rows, Grid)].firstChild.value = Obj.value * Grid.rows[Rows].cells[ReturnRowObj("PRICE", Rows, Grid)].firstChild.value;

                    document.getElementById('Total_AMOUNT').value = TotalGridAmount("AMOUNT", Grid);

                }

                Grid.rows[Rows].cells[ReturnRowObj("PRICE", Rows, Grid)].firstChild.focus();

                break;

            }

            case "PRICE":

                {

                    if (IsPlusNumeric(Obj.value) == false) {

                        alert('请输入正确的单价！');

                        return false;

                    }

                    if (IsInteger(Grid.rows[Rows].cells[ReturnRowObj("QTY", Rows, Grid)].firstChild.value) == true) {

                        Grid.rows[Rows].cells[ReturnRowObj("AMOUNT", Rows, Grid)].firstChild.value = Obj.value * Grid.rows[Rows].cells[ReturnRowObj("QTY", Rows, Grid)].firstChild.value;

                        document.getElementById('Total_AMOUNT').value = TotalGridAmount("AMOUNT", Grid);

                    }                

                    Grid.rows[Rows].cells[ReturnRowObj("LEAD_TIME", Rows,Grid)].firstChild.focus();                    

                    break;

                }         

        case "REMARK":

            {

                if (Rows == Grid.rows.length - 1) {

                    event.keyCode = 0;

                    AddTableRow("Dg_PO", HidCol); //增加行

                    EndRow = 1;

                    Grid.rows[Rows + 1].cells[ReturnRowObj("Item", Rows,Grid)].firstChild.focus(); //

                }

                else {

                    Grid.rows[Rows + 1].cells[ReturnRowObj("Item", Rows, Grid)].firstChild.focus(); //

                    event.keyCode = 0;

                }

                break;

            }

        default:

            {

                Grid.rows[Rows].cells[ReturnRowObj("Item", Rows, Grid+1)].firstChild.focus();

            }

    }

}

function AddRow(Row, ParentID, ColCount, RowCount, HidCol) {

    for (i = 0; i < ColCount; i++)//插入列

    {

        var Col = Row.insertCell(i);

        Col.className = 'category';

        switch (document.getElementById(ParentID).rows[RowCount].cells[i].firstChild.id) {

            case "Del_But":

                {

                    var RowNum = parseInt(document.getElementById(ParentID).rows[RowCount].cells[i].firstChild.value) + 1;

                    Col.innerHTML = "<input type=button id='Del_But' style='background-color:White;border:0px:width:1%;' value='" + RowNum + "'/>";

                    Col.firstChild.setAttribute("width", "1%");

                    Col.firstChild.onclick = function() {

                    OnKeyDelRow('Dg_PO', this, this.parentElement.parentElement.rowIndex, 'Total_AMOUNT', 'AMOUNT');

                    }

                    break;

                }

            case "PKID":

                {

                    Col.innerHTML = "<input type='text' id='PKID' value='-1' style='border:0'/>";

                    Col.style.display = 'none'

                    break;

                }

            case "UPC":

                {

                    Col.innerHTML = "<input type='text' id='UPC' value='-1' style='border:0'/>";

                    Col.style.display = 'none'

                    break;

                }

            case "Item":

                {

                    Col.innerHTML = "<input type='text' id='Item' value='' style='width:100%;border:0' onkeydown='if(event.keyCode==13){onGridContral(this,this.parentElement.parentElement.rowIndex,this.parentNode.cellIndex,4)}'></input>\n";

                    break;

                }                

            case "Brand":

                {

                    Col.innerHTML="<input type='text' readonly =true id='Brand' value='' style='width:100%;border:0' onkeydown='if(event.keyCode==13){onGridContral(this,this.parentElement.parentElement.rowIndex,this.parentNode.cellIndex,4)}'></input>";

                    break;

                }

            case "DESCRIPTION":

                {

                    Col.innerHTML = "<input type='text' readonly =true id='DESCRIPTION' value='' style='width:100%;border:0' onkeydown='if(event.keyCode==13){onGridContral(this,this.parentElement.parentElement.rowIndex,this.parentNode.cellIndex,4)}'></input>";

                    break;

                }

            case "QTY":

                {

                    Col.innerHTML = "<input type='text' id='QTY' value='' style='width:100%;border:0' onkeydown='if(event.keyCode==13){onGridContral(this,this.parentElement.parentElement.rowIndex,this.parentNode.cellIndex,4)}'></input>";

                    break;

                }

            case "PRICE":

                {

                    Col.innerHTML = "<input type='text' id='PRICE' value='' style='width:100%;border:0' onkeydown='if(event.keyCode==13){onGridContral(this,this.parentElement.parentElement.rowIndex,this.parentNode.cellIndex,4)}'></input>";

                    break;

                }

            case "AMOUNT":

                {

                    Col.innerHTML = "<input type='text' readonly =true id='AMOUNT' value='' style='width:100%;border:0' onkeydown='if(event.keyCode==13){onGridContral(this,this.parentElement.parentElement.rowIndex,this.parentNode.cellIndex,4)}'></input>";

                    break;

                }

            case "LEAD_TIME":

                {

                    Col.innerHTML = "<input type='text' onfocus='setday(this)' id='LEAD_TIME' value='' style='width:100%;border:0' onkeydown='if(event.keyCode==13){onGridContral(this,this.parentElement.parentElement.rowIndex,this.parentNode.cellIndex,4)}'></input>";

                    break;

                }

            case "REMARK":

                {

                    Col.innerHTML = "<input type='text' id='REMARK' value='' style='width:100%;border:0' onkeydown='if(event.keyCode==13){onGridContral(this,this.parentElement.parentElement.rowIndex,this.parentNode.cellIndex,4)}'></input>";

                    break;

                }               

        }

    }

}

function ReturnCellObj(ObjName, Row)//返回要选择TD的列号

{

    //ObjName 列名

    //Row     哪一行

    var ObjCells = -1;

    var LenC = Row.cells.length;

    for (var i = 0; i < LenC; i++) {

        if (Row.cells[i].id == ObjName) {

            ObjCells = i;

        }

    }

    return ObjCells;

}

ps:HidCol可以随便传个值了,以前是为了考虑有隐藏列,后来用ReturnCellObj之后就不用考虑隐藏列的问题了

指间的风 2009-04-02

打赏
举报

当然了，我自己写的。

zhang_13245768 2009-04-02

打赏
举报

[Quote=引用 11 楼 FreeSarge 的回复:]
你要全复制，要不就是的机器禁止了脚本
[/Quote]
全部复制也是一样的啊，也没有禁止脚本啊。你试过可以？

指间的风 2009-04-02

打赏
举报

你要全复制，要不就是的机器禁止了脚本

指间的风 2009-04-02

打赏
举报

不可能吧

zhang_13245768 2009-04-02

打赏
举报

[Quote=引用 8 楼 FreeSarge 的回复:]
HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type ="text/javascript" >

var Datalist…
[/Quote]
生成不了。。点了没反应。。

指间的风 2009-04-02

打赏
举报



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

    <script type ="text/javascript" >

    

    var Datalist = new Array("1","2","3","4","5","6","7","8","9","10");

    function Test ()

    {

       var div = document.getElementById("xx");

       div.innerHTML ="";

        var table = document.createElement("TABLE");

        var tboby = document.createElement("TBOBY");

        var tr = document.createElement("TR");

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

        {

              var td = document.createElement("TD");

              td.innerText =  Datalist[i];

              tr.appendChild(td);

        }

        tboby.appendChild(tr);

        table.appendChild(tboby);

        div.appendChild(table);

    }

  

    

    </script>

    

</head>

<body>

    <form id="form1" runat="server">

    <div id = "xx">

    

    </div>

    

    <input  type ="button"  onclick = "Test()") />

    </form>

</body>

</html>

数据源你自己解决吧

wujinjian2008n 2009-04-02

打赏
举报

[Quote=引用 3 楼 wujinjian2008n 的回复:]
var tr=document.createElement("tr"); //创建行
var td=document.createElement("td"); //创建列
var textnode=document.createTextNode("文本"); //创建文本
td.appendChild(textnode); //往td中加入文本
tr.appendChild(td); //同上

document.getElementById("tbody_id").appendChild(tr);

//用createElement("要创建的元素名") 去创建

*直接敲的，有可能单词拼写有错误！
[/Quote]

<table>
<tbody id="tbody_id"></tbody>
</table>

zhang_13245768 2009-04-02

打赏
举报

尽量详细一点啊我JS很差的

zhxhdean 2009-04-02

打赏
举报

3楼可以

ak8800 2009-04-02

打赏
举报

设置table的ID，然后通过ID动态的添加tr和td对象，输入值就可以了呗

wujinjian2008n 2009-04-02

打赏
举报

var tr=document.createElement("tr"); //创建行
var td=document.createElement("td"); //创建列
var textnode=document.createTextNode("文本"); //创建文本
td.appendChild(textnode); //往td中加入文本
tr.appendChild(td); //同上

document.getElementById("tbody_id").appendChild(tr);

//用createElement("要创建的元素名") 去创建

*直接敲的，有可能单词拼写有错误！