控制TD的每个的TR

Question

我有这样

由用户 在一个表中产生依赖于动态地在一种情形下一个TR排数的要求的显示将在那里，一些时间4周的TR或一段时间8周..的TR

最大的TR 10可以是有和各红素将有6个TDS 每个TD将包含下拉项或单选按钮，每一个在TD项目的选择 将触发 是否下一TD在同一行（TR）中显示或不显示。

实现上述我使用div标签和使用它，我Hidding，或使其可见

我面对

1）所面临的挑战，我不能创建的唯一ID对于所有10个TR的中的所有TD，因此，如果我在第二个TR中隐藏一个TD的一个Class ID，那么它也会在下一个连续TR中隐藏相应的第二个TD。

这是因为类ID，我在FOR循环中以编程方式赋予它。

你可以请我建议我如何才能着手实施这一要求？

2）我们可以在运行时给TD提供Id吗？

Answer 1

下面的大纲是一个非常基本的元素创建程序。它将运行以基于特定用户数据创建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 2

搁置代码决定... 尝试使用class而不是id然后您可以利用通过JS的this选择器。

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页面正常。