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. 您在此元素中有两个“id”参数，<table id="data-table" id="test">...这将与我在下面修复的 JQuery 一起使用，但无论哪种方式，它都是格式错误的 html。

  2. 在您的选择器中，您正在使用基于其 css 类属性查找元素的语法，但是您的 HTML 中的元素将这些值设置为“id”属性。因此，this, $(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. 使用 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();
}
于 2013-11-05T21:35:41.323 回答
0

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

在没有看到您作为 html 输出到 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 
});

编辑：如果 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 回答