0

HTML テーブルで選択された任意の行から値を取得する事前入力フォームを作成しようとしています。HTML ページは JSP によって取り込まれます。

私のテーブルはこんな感じ

<table id="data-table" id="test">
    <thead>
        <tr>
            <th>value1</th>
            <th>value2</th>
            <th>value3</th>
            <th>value4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="class1"><%= value.valueOne() %></td>
            <td id="class2"><%= value.valueTwo() %></td>
            <td id="class3"><%= value.valueThree() %></td>
            <td id="class4"><%= value.valueFour() %></td>
        </tr>
        <%
        }
        %>
    </tbody>
</table>

特定の行をクリックすると、行の値が事前入力されたフォームを取得したいと考えています。これを行うjsコードがいくつかあります。

$(document).on("click", ".data-table .class1", function(e) {
    var value =  $(this).closest('tr').val();
    console.log(value);
    // Just to check if I get the correct value 
});

残念ながら、その特定の行の値を DOM から取得し、それをフォームに入力する方法を理解できません。これは、テーブルの上にオーバーレイしたいものです。ポインタをいただければ幸いです。私は本当にもっとコードを書いていただろうが、私はJqueryを知らず、立ち往生している

4

4 に答える 4

1

HTML マークアップと JQuery セレクターにいくつか問題があります。提供したコードを実行することはできません...

  1. この要素には 2 つの 'id' パラメータがあり<table id="data-table" id="test">ます... これは、以下で修正した JQuery で機能しますが、いずれにしても不正な形式の html です。

  2. セレクターでは、css クラス属性に基づいて要素を見つけるための構文を使用していますが、HTML の要素にはこれらの値が「id」属性として設定されています。したがって、これは、$(document).on("click", ".data-table .class1", function(e) {次のように書く必要があります。$(document).on("click", "#data-table #class1", function(e) {

ここで、行内のすべての「td」要素内の値を取得しようとしている場合、実際に必要なのは、クリックされた「td」の親要素を取得してから、その子を取得することだけです。次に、各子の値を取得します。

このような...

$(document).on("click", "#data-table #class1", function(e) {
    var elements =  $(this).parent().children();

    $.each(elements, function(index, el){
        alert($(el).html());
    });
});

これを実際に見るためにJSFiddleを保存しました... http://jsfiddle.net/2LjQM/

于 2013-11-05T21:48:03.027 に答える
1

一般的な戦略は次のとおりです。

  • サーバー側でテーブルにデータを入力します:完了
  • ページに既存のフォームを持ちますが、css ( display:none)で非表示にします
  • trすべての要素に クリック リスナーを登録して、次のことを行います。
    1. td内のそれぞれの中の値を見つけますtr
    2. 対応するフォーム入力を選択します
    3. val(value)jQuery の関数を使用して入力を設定します。
    4. フォームが非表示の場合は再表示する

これを念頭に置いて、クリック リスナーをドキュメントから次のようなものに変更します。(注:value.valueOne()単なる数字または文字列であり、html は含まれていないと想定しています。

//target just TR elements
$('tr').click(function(){
  values = [];
  $(this).children().each(function(){
    //add contents to the value array.
    values.push($(this).html())
  });

  //fill in the form values
  populateForm(values);
});

フォームへの入力は、フォームの HTML に完全に依存しますが、開始するために、次のようになります。

function populateForm(values){
  //set the value of the input with id of name to the value in the first td.
  $('#name').val(values[0]);
  //show the form (id inputForm) now that it's populated
  $('#inputForm').show();
}
于 2013-11-05T21:35:41.323 に答える
0

val()フォーム入力の値を返すために使用されます。それを使用して行の値を取得しようとしていますが、行にはvalue.

TD への出力を html として表示せずに、フォーム コントロールであると想定します。

試す

$(document).on("click", ".data-table .class1", function(e) {
    var value =  $(this).find(':input').val(); // `:input pseudo selector wull access any form control input,select,textarea
    console.log(value);
    // Just to check if I get the correct value 
});

編集: TD にテキストが含まれている場合

 var value =  $(this).text();
于 2013-11-05T21:20:36.517 に答える
0

DOM をスクレイピングする代わりに、ロジックを反転し、代わりに JavaScript を使用して行を構築できます。この jsBin をチェックして、実際のソリューションを確認してください: http://jsbin.com/aligaZi/2/edit?js,output

空のテーブルから始めます。

  <table class="data-table" id="test">
    <thead>
        <tr>
            <th>value1</th>
            <th>value2</th>
            <th>value3</th>
            <th>value4</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

フォームにデータを入力する必要があるため、例として単純なものを使用します。

<form class="data-form">
  <label>Value1<input class="value1" /></label>
  <label>Value2<input class="value2" /></label>
  <label>Value3<input class="value3" /></label>
  <label>Value4<input class="value4" /></label>
</form>

次に、JavaScript側で：

$(function() {
  // Interpolate the values somehow.
  // I'm not familiar with JSP syntax, but it shouldn't be too hard.
  // I will use dummy data instead.

  var tableData = [
    {
      value1: "row1-v1",
      value2: "row1-v2",
      value3: "row1-v3",
      value4: "row1-v4"
    }, {
      value1: "row2-v1",
      value2: "row2-v2",
      value3: "row2-v3",
      value4: "row2-v4"
    }
  ];

  // For each object, create an HTML row
  var rows = $.map(tableData, function(rowData) {
    var row = $("<tr></tr>");
    row.append($('<td class="class1"></td>').html(rowData.value1));
    row.append($('<td class="class2"></td>').html(rowData.value2));
    row.append($('<td class="class3"></td>').html(rowData.value3));
    row.append($('<td class="class4"></td>').html(rowData.value4));

    // When this row is clicked, the form must be filled with this object's data
    row.on("click", function() {
      fillForm(rowData);
    });

    return row;
  });


  $(".data-table").append(rows);

  function fillForm(rowData) {
    var form = $(".data-form");

    form.find("input.value1").val(rowData.value1);
    form.find("input.value2").val(rowData.value2);
    form.find("input.value3").val(rowData.value3);
    form.find("input.value4").val(rowData.value4);
  }
});
于 2013-11-05T21:54:51.113 に答える