Question

我想选择并将动态生成的表中的行数据传递给模态以进行可视化。

贝娄是我尝试过的：

使用Javascript：

function getDataFromRow(obj) {
  var modal = document.getElementById("modal1");

  var oTable = document.getElementById('myTableData'); // gets table

  var index = obj.parentNode.parentNode.rowIndex; // gets index of clicked row

  var oCells = oTable.rows.item(index).cells; // gets cells of current row

  var cellLength = oCells.length; // gets amount of cells of current row

  // loops through each cell in current row
  for(var j = 2; j < cellLength; j++){
    var cellVal = oCells.item(j).innerHTML; // get your cell info here

    $( ".ModalText").append('<div>' + cellVal + '</div>');
  }
}

Modal的HTML代码：

<!-- Modal Structure -->
<div class="modal" id="modal1">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <div class="ModalText"></div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Close</a>
  </div>
</div>

我的表格HTML代码：

 <table id="myTableData" class="bordered">
    <thead>
      <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td><b>Name</b></td>
          <td><b>Species_Id</b></td>
          <td><b>Name</b></td>
          <td><b>Species_Id</b></td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

我的表HTML的JQuery：

var obj = text;
for(var i = 0;  i < obj.features.length; i++) {
var featureTitle = obj.features[i].properties.title;
var featureHab = obj.features[i].properties.Broad_Habi;
var timestamp = obj.features[i].properties.timestamp;
var id = obj.features[i].properties.id;
var coordinatesx = obj.features[i].properties.geom_X;
var coordinatesy = obj.features[i].geometry.geom_Y;
var image = obj.features[i].properties.Image;
var name = obj.features[i].geometry.Name;

$('#myTableData tbody').append(
'<tr><td><a class="btn-floating btn-smal waves-effect waves-light"><i data-  target="modal1" class="btn-floating modal-trigger small material-icons onClick="Javacsript:getDataFromRow(this)">info_outline</i></a></td>'+
    '<td><a class="btn-floating btn-smal waves-effect waves-light"><i class="btn-floating small material-icons" onClick="Javacsript:deleteRow(this)">delete</i></a></td>'+
    '<td><img src ="' + image + '"class="responsive-img"></td>'+
                                '<td>'+id+'</td>'+
                                '<td>'+featureTitle+'</td>'+
                                '<td>'+timestamp+'</td>'+
                                '<td>'+coordinatesx+'</td>'+
                                '<td>'+coordinatesy+'</td>'+
                                '</tr>');

Answer 1

我不知道你在jQuery部分的意思，但这里是我想你想做的一个例子：

首先解析表格的td中的所有内容并将其存储在变量中：

 var output="";
    //parse everything in a td of this table and store it in a variable
    $("table#myTableData td").each(function(){
     //parse each cell of the table and append it's content to a variable
      output=output+" "+$(this).html();

    });

然后将此变量追加到您想要的元素：

$('#modal1 p').html(output);

这是我建议的方式的工作副本

https://plnkr.co/edit/OsiTBcw8JrjwZZGWkulu?p=preview

我把它全部包装到一个按下按钮时触发的功能

这是另一个关于如何在与上面相同的逻辑中使用jQuery来解析按钮所在行的元素的示例。

https://plnkr.co/edit/NLUZCbTNmkbyK5YPTCgC?p=preview

我知道如何使用jQuery遍历DOM可能会让人感到困惑，但是一旦熟悉它，它就会变得轻而易举。

当html完成渲染时调用$（document）.ready（）函数，所以你应该在那里包含所有逻辑。

$（＆＃39;按钮＆＃39;）。点击（功能）{..}会在用户点击该按钮时触发。

jQuery选择器的工作方式与css选择器相同。

另外，您可能会发现阅读此页面非常有用： https://api.jquery.com/category/traversing/tree-traversal/ 关于如何使用jQuery根据需要解析DOM。这些例子非常好。

将数据从javascript传递到HTML标记

使用Javascript：

Modal的HTML代码：

我的表格HTML代码：

我的表HTML的JQuery：

1 个答案: