控制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頁面正常。