1

以下の形式の表があります。

FirstName Last Name 
Jill      Smith 
Eve       Jackson

また、姓と名を更新するためのフォームもあります。これがフォームコードです。

   <!DOCTYPE html>
<html>
<body>

<form border="1">
  <tr>
     <td><label >FirtsName</label></td>
     <td><input type="text" id="firstname" class="medium"></td>
    </tr>
  <tr>
   <td><label >LastName</label></td>
   <td><input type="text" id="lastname" class="medium"></td>
   </tr>

</form>

</body>
</html>

jquery または javascript を使用してテーブル データをフォームに送信する方法。どんな助けでも大歓迎です！

ありがとう & よろしく カーシック

4

2 に答える 2

0

私はjsの専門家ではありませんが、入力がフォーカスを失うたびにフォームを送信できます

使用する<form name="myform" border="1">

と ：

<input type="text" id="firstname" class="medium" onBlur="document.forms["myform"].submit()">

おそらくこれを行うためのより良い方法がありますが、ここに単なるアイデアがあります...

- 編集 ： -

申し訳ありませんが、重要なことを忘れていました。次のようにフォームに名前を付ける必要があります。

<form name="myform" action="file.php">
于 2013-03-15T03:43:19.490 に答える
0

私は英語があまり得意ではないので、十分に理解できないかもしれませんが、あなたがやりたいことをするために、私は次のようにします：

まず最初に、HTML コードを改善する必要があります。これにより、仕事がずっと簡単になります。

ユーザーテーブルで：

  • <table> </table>: を追加しidて、jQuery でより簡単に処理できるようにします :$('#id')メソッド

元：<table id="users"></table>

  • <thead><tr><th> </th></tr></thead><tbody> </tbody>: このマークアップを使用すると、テーブル ヘッダーとテーブル コンテンツを区別できます

  • <tr> </tr>id:サーバー側に を追加して、誰が誰であるかを確認します (つまり、John Smith が 2 人いる場合)

元：<tr id="name_01"><td>...</td></tr>

  • <td> </td>class:姓と名がどこにあるかを知るための属性を追加します

元：<td class="firstname">...</td><td class="lastname"></td>

あなたのフォームで：

  • <form> </form>: を追加しidて、より簡単につかむこともできます

元：<form id="usersform"></form>

  • <table> </table><table>:マークアップを忘れないでください。

  • <label> </label>for:入力 ID に一致する属性を追加します

元：<label for="firstname" >FirtsName</label>

これで、テーブルは次のようになります。

 <table id="users">
      <thead>
           <tr>
                <th>Firstname</th><th>Last Name</th>
           </tr>
      </thead>
      <tbody>
           <tr id="name_01">
                <td class="firstname">Jill</td><td class="lastname">Smith</td>
           </tr>
           <tr id="name_02">
                <td class="firstname">Eve</td><td class="lastname">Jackson</td>
           </tr>
      </tbody>
 </table>

あなたが望むものを作るにはいくつかの方法がありますが、基本的には2つの主な方法があります:

  1. 一度にフォーム内のテーブル エントリを 1 つだけ持つ
  2. すべてのテーブル エントリがある

I - 一度に 1 つのテーブル エントリのみ

HTML

 <form id="usersform" name="usersedit" >
      <table id="users">
          <tr>
              <td><label for="firstname" >FirtsName</label></td>
              <td><input type="text" id="firstname" class="medium"></td>
          </tr>
          <tr>
              <td><label for="lastname" >LastName</label></td>
              <td><input type="text" id="lastname" class="medium"></td>
          </tr>
      </table>
 </form>

jQuery :

//When there is a click on a line of the table
$('#users tbody tr').click(function(e) {
    //Get the <tr> id
    userid = $(this).attr('id');
    //Put the value of the firstname cell in the firstname input
    $('#usersform input#firstname').val($(this).find('td.firstname').html());
    
    //You can add a name attribute or an id for later works
    $('#usersform input#firstname').attr('name','first'+userid);
    
    //Now for the lastname input
    $('#usersform input#lastname').val($(this).find('td.lastname').html()).attr('name','first'+userid);
}

II - すべてのテーブル エントリ

HTML

 <form id="usersform" name="usersedit" >
      <table id="users">
           <thead>
                <tr>
                     <th>Firstname</th><th>Last Name</th>
                </tr>
           </thead>
           <tbody>
           </tbody>
      </table>
 </form>

jQuery :

//When there is a click on the table (#users) :
$.('#users').click(function(e){
    //handle the part of the form where we want to add input field
    myformtable = $('#userform table tbody');
    
    //For each row in the table
    $.('#users tbody tr').each(function(e) {
        //Create and append a new line
        userline = $(document.createElement('tr'));
        userline.appendTo(myformtable);

        //Create and append a firstname cell
        tdfirstname = $(document.createElement('td')).addClass('firstname');
        tdfirstname.appendTo(userline);

        //Create and append a firstname input
        firstname = $(document.createElement('input')).addClass('medium');
        firstname.appendTo(tdfirstname);

        //Add attribute
        firstname.attr({type: 'text', name: 'first'+$(this).attr('id')});

        //Set value
        firstname.val($(this).find('.firstname').html());

        //Same things with the lastname
        tdlastname = $(document.createElement('td')).addClass('lastname');
        tdfirstname.after(tdlastname);

        lastname = $(document.createElement('input')).addClass('medium');
        lastname.appendTo(tdlastname);

        lastname.attr({type: 'text', name: 'last'+$(this).attr('id')});

        lastname.val($(this).find('.lastname').html());
    }
}

ループで改善したり、css 疑似クラスを使って表のセルやフォームの入力を処理したりできますが、こちらの方が分かりやすいと思いました。

于 2013-03-17T17:44:45.270 に答える