#javascript #html
#javascript #HTML
Вопрос:
У меня есть требование, подобное этому
Количество строк, генерируемых в таблице, динамически зависит от пользователя, в одном сценарии будет один TR, некоторое время 4 TRs или некоторое время 8 TRs..
Может быть не более 10 TR, и в каждом TR будет по 6 Tds, Каждый TD будет содержать выпадающие элементы или переключатели, выбор каждого из элементов в TD приведет к отображению следующего TD в той же строке (TRs) или нет.
ДЛЯ реализации вышесказанного я использую теги Div и с их помощью скрываю их или делаю видимыми
Проблема, с которой я сталкиваюсь
1) Я не могу создать уникальный идентификатор для всех TD во всех 10 TR, из-за чего, если я скрою один идентификатор класса одного TD во 2-м TR, то он также скроет соответствующие 2-е TDS в следующих последовательных TR.
Это из-за идентификатора класса, который я генерирую программно в цикле FOR.
Не могли бы вы, пожалуйста, подсказать мне, как я могу приступить к реализации этого требования???
2) Можем ли мы указать идентификатор для TD во время выполнения??
Комментарии:
1. Итак, вам нужно добавлять динамические столбцы и строки во время выполнения, это ваш вопрос, верно?
2. Если вы опубликуете свой текущий код, люди могут предложить способы его улучшения.
3. Некоторый код был бы полезен при оценке возможных решений. Тем временем я представлю, что дело полностью написано на JavaScript.
4. Я еще ничего не начал, я все еще разрабатываю наилучшие способы реализации этого требования
5. @ Tj, поскольку я не написал код, я не могу его опубликовать, я проверяю различные способы реализации этого требования
Ответ №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 );
})();
Ответ №2:
Решения по кодированию в сторону… Попробуйте использовать class вместо id , тогда вы сможете воспользоваться this селектором через JS.
Ответ №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.
Комментарии:
1. @ Спасибо, Кальян, дай мне проверить