Question

我正在尝试创建一个预先填充的表单，该表单从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并且卡住了

Answer 1

你的总体策略应该是：

在服务器端填充表格：已完成
让表单预先存在于页面中，但隐藏了css（display:none）
在所有tr元素上注册一个点击侦听器，以便：
1. 在td
2. 选择相应的表单输入
3. 使用jQuery的val(value)函数填充输入。
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();
}

Answer 2

你的html标记和你的JQuery选择器有些问题。你永远无法执行你提供的代码......

你在这个元素中有两个'id'参数，<table id="data-table" id="test"> ...这将与我在下面修复的JQuery一起使用，但无论如何都是格式错误的HTML。
在您的选择器中，您使用的语法是基于它的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/

Answer 3

val()用于返回表单输入的值。您正在使用它来尝试获取行的值，而行没有value。

没有看到你输出到TD的输出是什么，我认为它是一个表单控件

尝试

$(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 
});

编辑：如果道明包含文字

 var value =  $(this).text();

Answer 4

您可以反转逻辑，而不是抓取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);
  }
});

在jquery中将预先填充的表格作为HTML表格

4 个答案: