如何使用标头创建动态表 [英] how to create a dynamic table with header

问题描述

嗨朋友



i我试图用标题动态创建表..我已经实现了它但它不工作IE，并且在点击addrow时在所有其他浏览器中工作按钮itwill会添加一行但是表格标题会下降你可以在这里看到 [ ^ ]

我的代码是

hi friends

i am trying to create table dynamically with header .. i have achieved it but its not working IE , and working in all other browser when click addrow button itwill add one row but the table header is going down u can see here [^]
my code is

function addRow1(tableId, divId) {
    debugger;
    var id = document.getElementById('SubCategoryId' + divId).value;
    var dealModels = $("#" + id).val();

    var dealVar = dealModels.split(',');
    document.getElementById('hdnListCount').value = dealVar.length;
    var table = document.getElementById(tableId);
    var listCount = document.getElementById('hdnListCount').value;
    var rowCount = table.rows.length;
    var colsCount = 2;
    if (rowCount <= listCount) {

        var row = table.insertRow(rowCount);
        document.getElementById('RowCount' + tableId).value = ((rowCount - 1) + 1);

        // Column'1
        var cell1 = row.insertCell(0);

        var ddlId = tableId + "ddlVarNames" + ((rowCount - 1) + 1);
        var element1 = document.createElement('select');
        element1.setAttribute('id', ddlId);

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

            if (dealVar[i] != null &&dealVar[i].indexOf("key")>=0) {
                var option = document.createElement('option');
                var str = dealVar[i].split(';');
                var str1 = str[0].split(':');
                var str2 = str[1].split(':');

                option.setAttribute('value', str1[1]);

                option.appendChild(document.createTextNode(str2[1]));
                element1.appendChild(option);
            }
        }
        cell1.appendChild(element1);

        //Column'2
        var cell2 = row.insertCell(1);
        var element2 = document.createElement('input');
        element2.setAttribute('name', 'hidden');
        element2.type = "text";
        element2.disabled = "disabled";
        cell2.appendChild(element2);
        // Column last
        var cell3 = row.insertCell(2);
        var btnId = "btnDelete" + ((rowCount - 1) + 1);
        var element3 = document.createElement("input");
        element3.setAttribute('id', btnId);
        element3.type = "button";
        element3.setAttribute('value', 'Delete');
        element3.onclick = function () { removeRow1(btnId, tableId); };
        cell3.appendChild(element3);


    } else {
        alert('You can add ' + listCount + ' rows only!');


    }
}

表头应保留为头

the table header should remain as header

推荐答案

（ ＃ + id）.val（）;

var dealVar = dealModels.split（' ，）;
document .getElementById（' hdnListCount').value = dealVar.length;
var table = document .getElementById（tableId）;
var listCount = document .getElementById（' hdnListCount'）。value;
var rowCount = table.rows.length;
var colsCount = 2 ;
if （rowCount< = listCount）{

var row = table.insertRow（rowCount）;
document .getElementById（' RowCount' + tableId）.value =（（rowCount - 1 ）+ 1 ）;

// Column'1
var cell1 = row.insertCell（ 0 ）;

var ddlId = tableId + ddlVarNames +（（rowCount - 1 ）+ 1 ）;
var element1 = document .createElement（' 选择'）;
element1.setAttribute（' id'，ddlId）;

for （ var i = 0 ; i< = dealVar.length; i ++）{

if （dealVar [i]！= null && dealVar [i] .indexOf（ key ）> = 0 ）{
var option = document .createElement（' option'）;
var str = dealVar [i] .split（' ;'）;
var str1 = str [ 0 ] .split（' ：'）;
var str2 = str [ 1 ] .split（' ：'）;

option.setAttribute（' value'，str1 [ 1 ]）;

option.appendChild（ document .createTextNode（str2 [ 1 ]）） ;
element1.appendChild（option）;
}
}
cell1.appendChild（element1）;

// Column'2
var cell2 = row.insertCell（ 1 ）;
var element2 = document .createElement（' input'）;
element2.setAttribute（' name'， ' hidden'）;
element2.type = text;
element2.disabled = disabled;
cell2.appendChild（element2）;
// 列最后
var cell3 = row.insertCell（ 2 ）;
var btnId = btnDelete +（（rowCount - 1 ）+ 1 ）;
var element3 = document .createElement（ input）;
element3.setAttribute（' id'，btnId）;
element3.type = button;
element3.setAttribute（' value'， ' 删除'）;
element3.onclick = function （）{removeRow1（btnId，tableId）; };
cell3.appendChild（element3）;


} else {
alert（' 您可以添加' + listCount + ' 仅行！' ）;


}
}

("#" + id).val(); var dealVar = dealModels.split(','); document.getElementById('hdnListCount').value = dealVar.length; var table = document.getElementById(tableId); var listCount = document.getElementById('hdnListCount').value; var rowCount = table.rows.length; var colsCount = 2; if (rowCount <= listCount) { var row = table.insertRow(rowCount); document.getElementById('RowCount' + tableId).value = ((rowCount - 1) + 1); // Column'1 var cell1 = row.insertCell(0); var ddlId = tableId + "ddlVarNames" + ((rowCount - 1) + 1); var element1 = document.createElement('select'); element1.setAttribute('id', ddlId); for (var i = 0; i <= dealVar.length; i++) { if (dealVar[i] != null &&dealVar[i].indexOf("key")>=0) { var option = document.createElement('option'); var str = dealVar[i].split(';'); var str1 = str[0].split(':'); var str2 = str[1].split(':'); option.setAttribute('value', str1[1]); option.appendChild(document.createTextNode(str2[1])); element1.appendChild(option); } } cell1.appendChild(element1); //Column'2 var cell2 = row.insertCell(1); var element2 = document.createElement('input'); element2.setAttribute('name', 'hidden'); element2.type = "text"; element2.disabled = "disabled"; cell2.appendChild(element2); // Column last var cell3 = row.insertCell(2); var btnId = "btnDelete" + ((rowCount - 1) + 1); var element3 = document.createElement("input"); element3.setAttribute('id', btnId); element3.type = "button"; element3.setAttribute('value', 'Delete'); element3.onclick = function () { removeRow1(btnId, tableId); }; cell3.appendChild(element3); } else { alert('You can add ' + listCount + ' rows only!'); } }

表头应保留为标题

the table header should remain as header

你可以通过gridview控件来解决这个问题。



尝试以下链接。< br $> b $ b

从ASP.NET GridView动态添加和删除行 [ ^ ]

这篇关于如何使用标头创建动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！