2016-10-16 6 views
1

2つの異なるデータベースからデータを取得し、そのデータをインターフェイスに送り、インターフェイスを使用して新しいデータベースに格納する情報を決定するインターフェイスを作成しています。 (基本的にデータベースをマージするシステムを作成しますが、ユーザーは新しいデータベースに渡すデータを選択します)。このインターフェイスにはテキストボックスもありますので、両方のデータベースに不正なデータがある場合にユーザーがデータを入力できます。JSテーブルのデータを動的に変更するには

現在、私は2つのデータベースの部分だけを扱っており、ユーザーがデータを選択するために1つのチェックボックスをチェックするチェックボックスシステムのタイプを実装したいと思っていました。偽にする。

私はそれを行う方法を見つけましたが、フォーム全体を取り、別のテーブル行で試してみるとクラッシュします。私はJSをテーブルの行ごとに独立させるようにしたいと思っていました。このようなメカニズムを各行に実装する方法はありますか?これは私の現在のコードです:(。PsのHTMLにはPHPファイルにするために使用)

HTML:

<html> 
    <head> 
    <script src="jquery-1.12.4.min.js"></script> 
    <script src="formAdd.js"></script> 

    <link rel="stylesheet" type="text/css" href="dbInfo.css"> 
    <title>Database 1</title> 
    </head> 
    <body> 
    <form name="contactform" method="post" action=""> 
     <table id="Forms" width="100%"> 
     <col width="10%" > 
     <col width="30%" > 
     <col width="30%" > 
     <col width="30%" > 
     <tr> 
      <th style="background-color:#7FCCCC"> Fields </th> 
      <th style="background-color:#7FCCCC"> DB 1 </th> 
      <th style="background-color:#7FCCCC"> DB 2 </th> 
      <th style="background-color:#7FCCCC"> DB Nueva </th> 
     </tr> 
     <tr style="background-color:#CCCCCC"> 
      <td style="font-weight:bold"> Fecha UTC </td> 
      <td> <input type="checkbox" name="FechaUTC1" onclick="CopyF(this.form)" value="September 14" align="right"> September 14 </td> 
      <td> <input type="checkbox" name="FechaUTC2" onclick="CopyF2(this.form)" value="November 17" align="right"> November 17 </td> 
      <td> <input type="text" name="FechaUTC3" size="60"> </td> 
     </tr> 
     </table> 

     <!-- <tr> 
      <td style="font-weight:bold"> Fecha Local </td> 
      <td> <input type="checkbox" name="FechaLoc1" onclick="CopyFLoc(this.form)" value="<?php echo $test ?>" align="right"> Septiembre 13, 2016 23:06:31 Hora Local </td> 
      <td> <input type="checkbox" name="FechaLoc2" onclick="CopyFLoc3(this.form)" value="<?php echo $test ?>" align="right"> Noviembre 14 2016 23:06:31 Hora Local </td> 
      <td> <input type="text" name="FechaLoc3" size="60"> </td> 
     </tr> 

     --> 
     </table> 
     <p> 
     <input type="submit" value="Submit"> 
     </p> 
    </form> 
    </body> 
</html> 

JS:あなたの質問の最初の部分については

function CopyF(f) { 
    if(f.FechaUTC1.checked == true) { 
    f.FechaUTC3.value = f.FechaUTC1.value; 
    if(f.FechaUTC2.checked == true) 
     f.FechaUTC2.checked = false; 
    } 
} 

function CopyF2(f) { 
    if(f.FechaUTC2.checked == true) { 
    f.FechaUTC3.value = f.FechaUTC2.value; 
    if(f.FechaUTC1.checked == true) 
     f.FechaUTC1.checked = false; 
    } 
} 
+0

また、私はあなたの機能の最初の部分は、ラジオボックスの代わりにチェックボックスを使用して行うことができると信じています。 – Jhecht

答えて

1

、私は信じていますラジオボタンを使用するほうが、使用しようとしているタイプの機能が既にあります(そのうちの1つだけをクリックできます)。 "その他"という3番目のオプションを追加すると、入力可能な入力ボックスが有効になります。

クラッシュしないようにする最も簡単な方法は、行番号ラジオボックスの各セットはユニークです。

ここではjQueryと呼ばれるライブラリを使用しています。これは非常に人気があり、多くの機能を内蔵しています。初めてjQueryを使用したことがある人は、CodeSchoolに行って、少なくとも最初の部分を読んで、私が書いたことを理解することをお勧めします。

$(function() { 
 
    // this way of calling the dollar sign ($) function is a shorthand for $(document).ready(); 
 
    $('input.fecha-unico').on('click', function() { 
 
    //I am adding an event to all inputs with the class 'fecha-unico' 
 
    var $this = $(this); //the this object is itself just the HTMLElement object from your browser. Here I am wrapping it in the jquery functions to allow myself access to the functions jquery has. 
 
    var $input = $this.closest('tr').find('input:text'); 
 
    //I am finding the closest TR to this radio element, and then searching ('finding') a textbox child. 
 
    if ($this.val() == '-1') { 
 
     //If this checkbox's value is -1, it means we are using the 'other' checkbox, and need to enable the text input. 
 
     $input.prop('disabled', false); 
 
    } else { 
 
     //Otherwise, we need to make sure the writing thing is disabled (say you clicked the other box but then realized you wanted the first checkbox instead). 
 
     if (!$input.prop('disabled')) { 
 
     $input.prop('disabled', true) 
 
     } 
 
    } 
 
    }); 
 

 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="contactform" method="post" action=""> 
 
    <table id="Forms" width="100%"> 
 
    <col width="10%"> 
 
     <col width="30%"> 
 
     <col width="30%"> 
 
      <col width="30%"> 
 
      <tr> 
 
       <th style="background-color:#7FCCCC">Fields</th> 
 
       <th style="background-color:#7FCCCC">DB 1</th> 
 
       <th style="background-color:#7FCCCC">DB 2</th> 
 
       <th style="background-color:#7FCCCC" colspan="2">DB Nueva</th> 
 
      </tr> 
 
      <tr style="background-color:#CCCCCC"> 
 
       <td style="font-weight:bold">Fecha UTC</td> 
 
       <td> 
 
       <input class="fecha-unico" type="radio" name="FechaUTC1" value="September 14" align="right">September 14</td> 
 
       <td> 
 
       <input class="fecha-unico" type="radio" name="FechaUTC1" value="November 17" align="right">November 17</td> 
 
       <td> 
 
       <label>Other: 
 
        <input type="radio" class="fecha-unico" name="FechaUTC1" value="-1" /> 
 
       </label> 
 
       </td> 
 
       <td> 
 

 
       <input type="text" name="FechaUTC3" size="60" disabled> 
 
       </td> 
 
      </tr> 
 
      <tr style="background-color:#CCCCCC"> 
 
       <td style="font-weight:bold">Fecha UTC</td> 
 
       <td> 
 
       <input class="fecha-unico" type="radio" name="FechaUTC2" value="September 14" align="right">September 14</td> 
 
       <td> 
 
       <input class="fecha-unico" type="radio" name="FechaUTC2" value="November 17" align="right">November 17</td> 
 
       <td> 
 
       <label>Other: 
 
        <input type="radio" class="fecha-unico" name="FechaUTC2" value="-1" /> 
 
       </label> 
 
       </td> 
 
       <td> 
 

 
       <input type="text" name="FechaUTC3" size="60" disabled> 
 
       </td> 
 
      </tr> 
 
    </table> 
 

 
    <!-- <tr> 
 
      <td style="font-weight:bold"> Fecha Local </td> 
 
      <td> <input type="checkbox" name="FechaLoc1" onclick="CopyFLoc(this.form)" value="<?php echo $test ?>" align="right"> Septiembre 13, 2016 23:06:31 Hora Local </td> 
 
      <td> <input type="checkbox" name="FechaLoc2" onclick="CopyFLoc3(this.form)" value="<?php echo $test ?>" align="right"> Noviembre 14 2016 23:06:31 Hora Local </td> 
 
      <td> <input type="text" name="FechaLoc3" size="60"> </td> 
 
     </tr> 
 

 
     --> 
 

 
    <p> 
 
    <input type="submit" value="Submit"> 
 
    </p> 
 
</form>

+1

これは完全に機能しました!私は、JQueryにもっと慣れ親しむためにJQueryの完全なコースを運営します。ありがとうございました! – J1Ronnie

関連する問題