@yuleidis,
todavia no has respondido a mis preguntas.
Por lo tanto sólo puedo mostrar los scripts utilizados.
Todos estos ya están disponibles aquí en el foro.
a. Para mostrar filas una tras otra:
Code:
<script>
$(document).ready(function() {
// A function to add or remove rows of an Array (Multi Flexible)(Text) question
function varLengthArray(qID) {
if ($('#question'+qID+'').length > 0) {
// The HTML content of the Add/Remove elements - modify as you wish
var addContent = '[+] Añadir';
var removeContent = '[-] Eliminar';
// Create the Add and Remove elements & insert them
// Adjust colors by using other bootstrap classes
// „btn-primary“, „btn-success“, „btn-info“, „btn-warning“, „btn-danger“
var el1 = document.createElement('div');
el1.setAttribute('id','addButton'+qID);
el1.setAttribute('class','btn btn-success');
document.body.appendChild(el1);
var el2 = document.createElement('div');
el2.setAttribute('id','removeButton'+qID);
el2.setAttribute('class','btn btn-danger');
document.body.appendChild(el2);
// Move them to after the array
$( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
$( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
// Insert their HTML
$( 'div#addButton'+qID ).html( addContent );
$( 'div#removeButton'+qID ).html( removeContent );
// Style the elements - you can modify here if you wish
$( 'div#addButton'+qID ).css({
'margin':'10px 0 10px 10px',
'padding':'1px',
'text-align':'center',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
$( 'div#removeButton'+qID ).css({
'margin':'10px 0 10px 10px',
'padding':'1px',
'text-align':'center',
'width':'auto',
'cursor':'pointer',
'float':'left'
});
// Initially hide the Remove element
$( 'div#removeButton'+qID ).hide();
// Call the functions below when clicked
$( 'div#addButton'+qID ).click(function (event) {
addRow(qID);
});
$( 'div#removeButton'+qID ).click(function (event) {
removeRow(qID);
});
// Function to add a row, also shows the Remove element and hides the
//Add element if all rows are shown
function addRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' ) {
$( 'div#addButton'+qID ).hide();
}
}
// Function to remove a row, also clears the contents of the removed row,
// shows the Add element if the last row is hidden and hides the Remove
// element if only the first row is shown
function removeRow(qID) {
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = $( arrayRow ).size() - 1;
$( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
$( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
$( 'div#addButton'+qID ).show();
if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' ) {
$( 'div#removeButton'+qID ).hide();
}
}
// Just some initialization stuff
var arrayRow = '#question' + qID + ' table.ls-answers tr.subquestion-list';
var rowCount = '';
// Initially hide all except first row or any rows with populated inputs
$( arrayRow ).each(function(i) {
if ( i > 0 ) {
// We also need to give the hidden rows a name cause IE doesn't
// recognize jQuery :visible selector consistently
$( this ).attr('name', 'hidden').hide();
$('input[type=text]', this).each(function(i) {
if ($(this).attr('value') != '') {
$(this).parents('tbody:eq(0)').attr('name', 'visible').show();
$( 'div#removeButton'+qID ).show();
}
});
rowCount = i;
}
});
}
}
// Call the function with a question ID
varLengthArray({QID});
});
</script>
b. Para mostrar columnas de diferentes anchos
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Add a question class
thisQuestion.addClass('custom-array');
// Column-specific classes
$('table.subquestion-list tr', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
});
</script>
Code:
<style type="text/css">.custom-array table.subquestion-list col {
width: auto !important;
}
.custom-array table.subquestion-list thead .column-0 { width: 5%; }
.custom-array table.subquestion-list thead .column-1 { width: 10%; }
.custom-array table.subquestion-list thead .column-2 { width: 20%; }
.custom-array table.subquestion-list thead .column-3 { width: 10%; }
.custom-array table.subquestion-list thead .column-4 { width: 25%; }
.custom-array table.subquestion-list thead .column-5 { width: 30%; }
</style>
c. Para crear un menú desplegable en una columna (aquí columna con código "X003")
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
var thisQuestion = $('#question{QID}');
// Insert selects
$('.answer-item.answer_cell_X003', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
<option value="">...</option>\
<option value="1">Si</option>\
<option value="2">No</option>\
</select>');
// Listeners
$('.inserted-select', thisQuestion).on('change', function(i) {
if($(this).val() != '') {
$(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
}
else {
$(this).closest('.answer-item').find('input:text').val('').trigger('change');
}
});
// Returning to page
$('.with-select input:text', thisQuestion).each(function(i) {
var thisCell = $(this).closest('.answer-item');
var inputText = $.trim($(this).val());
$('select.inserted-select', thisCell).val(inputText);
});
// Clean-up styles
$('select.inserted-select', thisQuestion).css({
'max-width': '100%'
});
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
});
</script>
d. Para crear una máscara de entrada (aquí columna con código "X001")
1. Robin Herbots
[url]
github.com/RobinHerbots/Inputmask
[/url]
[url]
robinherbots.github.io/Inputmask/#/documentation
[/url]
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/4.0.9/jquery.inputmask.bundle.min.js"></script> <script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
$('#question{QID} .answer_cell_X001 input[type="text"]').inputmask({ regex: "([01][0-9])|([2][0-4]):([0-5][0-9])",
'placeholder': 'hh:mm',
'removeMaskOnSubmit': false,
'rightAlign': false,
});
});
</script>
2. Igor Escobar (Opción diferente)
[url]
igorescobar.github.io/jQuery-Mask-Plugin/
[/url]
e. Encabezados adicionales
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Insert the column categories
$('#question{QID} table.subquestion-list thead tr:eq(0) td:eq(0)').remove();
$('#question{QID} table.subquestion-list thead').prepend('<tr class="ls-heading">\
<td rowspan="2" colspan="1" style="border-top:0 !important;"></td>\
<th class="answer-text inserted-header" colspan="1"></th>\
<th class="answer-text inserted-header" colspan="1"></th>\
<th class="answer-text inserted-header" colspan="1"></th>\
<th class="answer-text inserted-header" colspan="1"></th>\
<th class="answer-text inserted-header" colspan="2">Temperatura</th>\
<th class="answer-text inserted-header" colspan="5">Hallazgo de las canales</th>\
<th class="answer-text inserted-header" colspan="1"></th>\
<th class="answer-text inserted-header" colspan="1"></th>\
</tr>');
});
</script>
f. Convertir campos de texto en casillas de verificación (no exclusivo)
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Column-specific classes
$('tr.subquestion-list', thisQuestion).each(function(i) {
$('th, td', this).each(function(i) {
$(this).addClass('column-'+i);
});
});
// Insert checkboxes
$('.answer-item.column-7, .answer-item.column-8, .answer-item.column-9, .answer-item.column-10, .answer-item.column-11', thisQuestion).addClass('custom-checkbox-item');
$('.custom-checkbox-item', thisQuestion).each(function(i) {
var thisID = $('input:text:eq(0)', this).attr('id');
$('label', this).before('<input class="" id="'+thisID+'" value="Y" type="checkbox" name="'+thisID.replace(/answer/, '')+'" />');
if($('input:text:eq(0)', this).val() == 'Y') {
$('input:checkbox:eq(0)', this).prop('checked', true);
}
$(this).removeClass('text-item').addClass('checkbox-item');
$('input:text:eq(0)', this).remove();
});
});
</script>
Es tu obligación transferir este cuestionario en papel a un diseño razonable para una encuesta en Internet.
Joffm
Topic Author
