1

3つ選択すると、2つが非表示になり、1つが表示になります。最初のオプションを選択すると、1つを押したときに表示され、もう1つを押すと2番目のオプションが表示されます。これをすべてテーブルに入れ、jqueryを使用してmanipulacion.jsファイルに新しい行ボタンを作成し、カウンターを作成します。これを各選択のIDに追加して、呼び出すだけではありません。エラーは、新しい行を作成して変更しない場合、コンソールを開いてエラーをチェックしない場合です。ここにコードをhtmlとで添付しました。jsはそれをコピーして、私が間違っていることを発見することができます。

コードhtml

<html>
<head>
</head>
<body>
<script type="text/javascript" src="jss/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="manipulacion.js"></script>
<script>    
    $(document).ready(function () {
        $("#estado").change(function () {
            if ($("#estado").val() == 2) {
                $("#sino").show();
                $("#sexo").hide();            
            }
            if ($("#estado").val() == 3) {
                $("#sino").hide();
                $("#sexo").show();
            }
            });
            });
    </script>
    <table>
    <tr>
    <td>
    <select id="estado">
    <option value="1">Seleccione 1 opcion</option>
    <option value="2">Laboratorio</option>
    <option value="3">Datos Generales</option>
    </select>
    </td>
    <td>
    <!-- //laboratorio -->
    <select name="sino" id="sino"style="display:none">
    <option value="1">Si </option>
    <option value="2">No</option>
    </select>
    </td>
    <td>
    <!-- //datos generales -->
    <select name="sexo" id="sexo"  style="display:none">
    <option value="1">Masculino </option>
    <option value="2">Femenino</option>
    </select>
    </td>
    <td><input type="button" value="+" class="clsAgregarFila"></td>
    </tr>
    </table>
    </body>
    </html>

コードmanipulacion.js

//manipulacion 
var contLin=1
    $(document).ready(function () {
        $("#estado"+contLin).change(function () {      
            if ($("#estado"+contLin).val() == 2) {
                $("#sino"+contLin).show();
                $("#sexo"+contLin).hide();       
            }
            if ($("#estado"+contLin).val() == 3) {
                $("#sino"+contLin).hide();
                $("#sexo"+contLin).show();
            }
}           );



});


$(document).ready(function(){
    //evento que se dispara al hacer clic en el boton para agregar una nueva fila
    $(document).on('click','.clsAgregarFila',function(){
        //almacenamos en una variable todo el contenido de la nueva fila que deseamos
        //agregar. pueden incluirse id's, nombres y cualquier tag... sigue siendo html

        var strNueva_Fila='<tr>'+
'<td><select id="estado'+contLin+'"><option value="1">Seleccione 1 opcion</option><option value="2">Laboratorio</option><option value="3">Datos Generales</option></select></td>' +
'<td><select name="sino'+contLin+'" id="sino"style="display:none"><option value="1">Si </option><option value="2">No</option></select></td>'+
'<td> <select name="sexo'+contLin+'" id="sexo"  style="display:none"><option value="1">Masculino </option><option value="2">Femenino</option></select><td>'+
'<td><input type="button" value="+" class="clsAgregarFila"><input type="button" value="-" class="clsEliminarFila"></td>'+
'</tr>';

contLin++;

        var objTabla=$(this).parents().get(3);


        $(objTabla).find('tbody').append(strNueva_Fila);


        if(!$(objTabla).find('tbody').is(':visible')){

            $(objTabla).find('caption').click();
        }
    });


    $(document).on('click','.clsEliminarFila',function(){

        var objCuerpo=$(this).parents().get(2);
            if($(objCuerpo).find('tr').length==1){
                if(!confirm('Esta es el única fila de la lista ¿Desea eliminarla?')){
                    return;
                }
            }


        var objFila=$(this).parents().get(1);

            $(objFila).remove();
    });



});
4

1 に答える 1

1

$("#estado"+contLin).change(function () {関数を要素にバインドしているために発生した問題#estado1(最初から)が、ドキュメントの準備ができてその要素が存在しないcontLin=1ときにJavaScriptが実行されます。#estado1

これを修正する簡単な方法の1つは、変更イベント関数を本体に移動して、テーブル行が追加されているときに$(document).on('click','.clsAgregarFila',function(){新しい変更関数が新しい関数にバインドされるようにすることです。#estadoXただし、これは非常に.clsAgregarFila非効率的であり、およびのクリックハンドラ関数に実際にすでに使用しているイベント委任を使用することをお勧めします.clsEliminarFila

イベントの委任は、ハンドラー関数を、既に存在する親または祖先のDOM要素にバインドすることによって機能します。次に、イベントはその要素で処理され、(指定したCSSセレクターを介して)ターゲット要素に委任されます。

たとえば$(document).on('click','.clsAgregarFila',function(){、イベントがバインドされた要素()で直接発生したときにハンドラーが呼び出されずdocument、セレクター(すべての要素が)に一致する子孫(内部要素)に対してのみ呼び出されることを意味しclass="clsAgregarFila"ます-を参照してください.on()

したがって、CSS属性セレクターを使用して。で始まるすべての要素を照合する次のものを使用できます。しかし、小さな問題があります-それはこのようには機能しません…<select> id="estado"

$(document).on('change', 'select[id^=estado]', function () {
    if ($("#estado"+contLin).val() == 2) {
        $("#sino"+contLin).show();
        $("#sexo"+contLin).hide();       
    }
    if ($("#estado"+contLin).val() == 3) {
        $("#sino"+contLin).hide();
        $("#sexo"+contLin).show();
    }
});

contLin == 2グローバル変数なので!私たちが本当に望んでいるのは、現在の行<select>でsを見つけることです。したがって、次の修正された関数が機能するはずであり、コードの重複を削除して、両方の関数をさらに適切に置き換えることができます:-)

 $(document).on('change', 'select[id^=estado]', function () {
      var estadoValue = parseInt(this.value);
      var rowSelects = $(this).closest('tr').find('select').slice(1);

      $(rowSelects[0]).toggle(estadoValue === 2);
      $(rowSelects[1]).toggle(estadoValue === 3);
});

ただし、このアプローチをさらに進めると、コードをこのデモのように書き直すことができます。HTML文字列を削除し.clone()、行の追加、行の削除の簡略化、イベント処理の連鎖、要素カウンターの削除に使用しました。代わりにクラスに置き換えました。

JavaScript

$(function(){
  var $tbody = $('tbody');
  var strNueva_Fila = $tbody.find('tr:first');

  $('tbody').on('change', 'select.estado', function() {
      var estadoValue = parseInt(this.value);
      var rowSelects = $(this).closest('tr').find('select').slice(1);

      $(rowSelects[0]).toggle(estadoValue === 2);
      $(rowSelects[1]).toggle(estadoValue === 3);
  }).on('click', 'input', function() {
      if (this.className === 'clsAgregarFila') {
        $tbody.append(strNueva_Fila.clone());
      } else if (this.className === 'clsEliminarFila') {
        $(this).closest('tr').remove();
      }

      buttonsToggle();
  });

  function buttonsToggle() {
    var $addButtons = $tbody.find('.clsAgregarFila');
    var $removeButtons = $tbody.find('.clsEliminarFila');

    // hide all
    $addButtons.hide();
    $removeButtons.hide();

    // show "-" button on all but first row
    $removeButtons.slice(0).show();

    // but hide "-" if there is only 1 row
    if ($removeButtons.length === 1) {
      $removeButtons.hide();
    }

    // show "+" button on last row only
    $addButtons.slice(-1).show();
  }
});

HTML(注:「-」<input><thead>and<tbody>要素を追加しました)。

<table>
  <thead></thead>
  <tbody>
      <tr>
      <td>
      <select id="estado" class="estado">
      <option value="1">Seleccione 1 opcion</option>
      <option value="2">Laboratorio</option>
      <option value="3">Datos Generales</option>
      </select>
      </td>
      <td>
      <!-- //laboratorio -->
      <select name="sino" class="sino" id="sino" style="display:none">
      <option value="1">Si </option>
      <option value="2">No</option>
      </select>
      </td>
      <td>
      <!-- //datos generales -->
      <select name="sexo" id="sexo" class="sexo" style="display:none">
      <option value="1">Masculino </option>
      <option value="2">Femenino</option>
      </select>
      </td>
      <td><input type="button" value="+" class="clsAgregarFila"/><input type="button" value="-" class="clsEliminarFila" style="display:none"/></td>
      </tr>
  </tbody>

お役に立てれば :-)

于 2013-02-22T00:27:53.020 に答える