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

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元素上注册一个click侦听器：
  1. 找到tr每个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选择器有几个问题。 你永远无法执行你提供的代码......

1. 你在这个元素中有两个'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/

Answer 3

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

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