Question

我有这样的要求

表中生成的行数依赖于用户动态生成的行数在一种情况下，一个TR将在那里，一些时间为4个TR或一些时间为8个TR ..

最多可以有10个TR，每个TR有6个Tds 每个TD都包含下拉项或单选按钮，将触发TD中每个项目的选择是否显示同一行（TR）中的下一个TD。

要实现上面我正在使用Div标签并使用它，我正在隐藏它或使其可见

我面临的挑战

1）我无法为所有10个TR中的所有TD创建唯一ID 因此，如果我在第二个TR中隐藏一个TD的一个类ID，那么它也是在下一个顺序TR中隐藏相应的第二个TD。

这是因为Class Id我在FOR循环中以编程方式进行了它。

您能否建议我如何继续实施此要求？

2）我们可以在运行时给出TD的Id吗？

Answer 1

除了编码决定...... 尝试使用class代替id，然后您可以通过JS利用this选择器。

Answer 2

下面的大纲是一个非常基本的元素创建计划。它将用于基于某些用户数据创建HTML文档。 http://jsfiddle.net/3rvDk/

(function(){

    function get_element_id( elem ) {
        return Number(elem.id.split('_')[1]);
    }
    /**
     * build_guid_generator
     * 
     * @returns {Function} to generate global unique identifiers with
     */
    function build_guid_generator(){
        var named_ids = {};
        var i = 0;
        return function( ns ){
            named_ids[ns] = named_ids[ns] || 0;
            return named_ids[ns]++;
        };
    }
    var guid = build_guid_generator();
    /**
     * build_drop_down
     * 
     * creates a <select> HTML Element with global unique identifier
     * options is an object literal whose keys become the text of the option 
     * 
     * @param {HTMLElement} container
     * @param {Object} options
     * @param {Function} change_event - function to execute when the value is changed
     */
    function build_drop_down( container, options, change_event ) {
        var ddl = document.createElement('select');
        ddl.id = 'ddl_' + guid('ddl');
        for( var option in options ) if ( options.hasOwnProperty( option ) ) {

            var opt = document.createElement('option');
            opt.text = option;
            opt.value = options[option];
            ddl.add(opt, null);

        }
        ddl.hide = function(){
            this.setAttribute('style','display:none;');
        };
        ddl.show = function(){
            this.setAttribute('style','');
        };
        container.appendChild( ddl );
        ddl.onchange = change_event;
        if ( get_element_id( ddl ) > 0 ) {
            ddl.setAttribute('style','display:none;');
        }
        return ddl;

    }
    /**
     * build_cell
     * 
     * creates a <td> HTML Element with global unique identifier and attaches to container
     * 
     * @param {HTMLElement} container
     */
    function build_cell ( container ) {
        var td = document.createElement('td');
        td.id = 'cell_' + guid('td');
        container.appendChild( td );
        return td;
    }
    /**
     * build_row
     * 
     * creates a <tr> HTML Element with global unique identifier and attaches to container
     * 
     * @param {HTMLElement} container
     */
    function build_row ( container ) {
        var tr = document.createElement('tr');
        tr.id = 'row_' + guid('tr');
        container.appendChild( tr );
        return tr;
    }

    var user_data = {
        rows : 10,
        cells : 6,
        options : {
            'off' : false,
            'test' : 'value'
        }
    };

    function test_data_set ( data ) {

        var container = document.createElement('div');
        container.id = 'container';
        document.body.appendChild( container );

        var i = 0;
        for ( ; i < data.rows ; i++ ) {
            var tr = build_row( container ),
                j = 0;
            for( ; j < data.cells ; j++ ) {
                var td = build_cell( tr );
                build_drop_down( td, data.options, function( event ) {
                    console.log( this.value );
                    var next_sibling = document.getElementById( 'ddl_' + ( get_element_id( this ) + 1 ) );
                    console.log( next_sibling );
                    if ( this.value === 'false' ) {
                        next_sibling.hide();
                    } else {
                        next_sibling.show();                        
                    }
                });
            }
        }

    }

    test_data_set( user_data );

})();

Answer 3

@harigm，因为你要求发布我已经放置它的代码，纯粹它与javascript无关。但是Asp.net和VB。

 Protected Sub btnNew_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnNew.Click   ''On New button or Cancel Button click
    Dim dt As DataTable
    Dim selIndex As Integer
    If btnNew.Text = "New" Then                                 ''when New button is clicked

        Try
             btnChangePwd.Enabled = False
            DGLogin.Width = 1250
            selectedindexval = True
            DGLogin.Columns.Item(4).Visible = True
            DGLogin.Columns.Item(5).Visible = True
            btnDelete.Enabled = False
            btnDeleteAll.Enabled = False
            Bind()
            dt = Session("datatab")
            selIndex = dt.Rows.Count Mod DGLogin.PageSize
            DGLogin.CurrentPageIndex = dt.Rows.Count \ DGLogin.PageSize
            DGLogin.SelectedIndex = selIndex
            DGLogin.EditItemIndex = DGLogin.SelectedIndex
            Dim dr As DataRow = dt.NewRow()
            dr("Userid") = String.Empty
            dr("UserName") = String.Empty
            dr("UserType") = String.Empty
            dr("Password") = String.Empty
            dr("EmailAlert") = False
            dr("EmailID") = String.Empty
            dr("SmsAlert") = False
            dr("PhoneNumber") = String.Empty
            dr("AlertOnWeekDays") = False
            dt.Rows.Add(dr)
            DGLogin.DataSource = dt
            DGLogin.DataBind()
            Dim ddlusType As DropDownList = DirectCast(DGLogin.Items(DGLogin.SelectedIndex).Cells(4).FindControl("ddlUserType"), DropDownList)
            ddlusType.Items.Remove("Administrator")
            ddlusType.Items.Remove("VP")
            Dim cnt As Integer = DGLogin.Items.Count
            For index As Integer = 0 To cnt - 1
                Dim lblPwd As Label = DirectCast(DGLogin.Items(index).Cells(5).FindControl("lblpwd"), Label)
                Dim lblconfirmPwd As Label = DirectCast(DGLogin.Items(index).Cells(6).FindControl("lblconfirmpwd"), Label)
                If lblPwd IsNot Nothing Then
                    If lblPwd.Text <> "" Then
                        Dim length As Integer = lblPwd.Text.Length
                        Dim strPwd As String = ""
                        For ind As Integer = 0 To length - 1
                            strPwd += "*"
                        Next
                        lblPwd.Text = strPwd
                        lblconfirmPwd.Text = strPwd
                    End If
                End If
            Next
            Dim chkemail As CheckBox = DirectCast(DGLogin.Items(DGLogin.SelectedIndex).Cells(7).FindControl("chkemailalertEdit"), CheckBox)
            Dim txtphone As TextBox = DirectCast(DGLogin.Items(DGLogin.SelectedIndex).Cells(10).FindControl("txtPhonenumber"), TextBox)
            Dim chksms As CheckBox = DirectCast(DGLogin.Items(DGLogin.SelectedIndex).Cells(9).FindControl("chkSmsalertEdit"), CheckBox)
            Dim EmailID As TextBox = DirectCast(DGLogin.Items(DGLogin.SelectedIndex).Cells(8).FindControl("txtemailid"), TextBox)
            Dim chkalertonweekdays As CheckBox = DirectCast(DGLogin.Items(DGLogin.SelectedIndex).Cells(11).FindControl("chkWeekdaysEdit"), CheckBox)
            chkalertonweekdays.Enabled = True
            chkemail.Enabled = False
            txtphone.Enabled = False
            chksms.Enabled = False
            EmailID.Enabled = False
            Dim txtusrid As TextBox = CType(DGLogin.Items(DGLogin.EditItemIndex).Cells(2).FindControl("txtuserid"), TextBox)
            txtusrid.Enabled = True
            txtusrid.Focus()
            txtusrid.Enabled = True
            Session("newrowadded") = True
            btnDelete.Enabled = False
            btnDeleteAll.Enabled = False
            btnNew.Text = "Cancel"
            btnEdit.Text = "Save"
            Session("soted") = False
            disablecheckbok()
            btnNext.Enabled = False
            btnlast.Enabled = False
            'btnfirst.Enabled = True
            'btnprevious.Enabled = True
            navigationButtouns()
        Catch ex As Exception
            UserMsgBox(ex.Message)
            WriteToLog(ex.Message)
        End Try
    ElseIf btnNew.Text = "Cancel" Then      'On click of Cancel Buttoun
        Try
            DGLogin.Width = 850
            selectedindexval = False
            DGLogin.SelectedIndex = -1
            If (Session("newrowadded") = True) Then
                If (DGLogin.EditItemIndex = 0) Then
                    DGLogin.CurrentPageIndex = 0
                End If
            End If
            btnChangePwd.Enabled = True
            Bind()
            DGLogin.Columns.Item(4).Visible = False
            DGLogin.Columns.Item(5).Visible = False
            DGLogin.EditItemIndex = -1
            DGLogin.DataBind()
            btnDelete.Enabled = True
            btnDeleteAll.Enabled = True
            btnNew.Text = "New"
            btnEdit.Text = "Edit"
            btnEdit.Enabled = True
            lblerror.Text = ""
            Session("soted") = False
            enablenavigationbuttouns()
            afterselectionchanged()
            EnableCheckBox()
        Catch ex As Exception
            WriteToLog(ex.Message)
        End Try
    End If
End Sub

它是一个在单击新按钮时向网格添加新行的示例，并且在aspx页面中将列添加到网格中将是正常的。

控制每个TR中TD的显示

3 个答案: