将数据从 javascript 传递到 HTML 标签

Question

我想 select 并将一行数据从动态生成的 table 传递到模态以进行可视化。

下面是我试过的：

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

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>

我的代码 table 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>

JQuery 我的 table HTML:

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 部分中的意思，但这是我假设你想做的事情的一个例子：

首先解析 table 的 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

我知道如何遍历 DOM 和 jQuery 可能会让人感到困惑，但是一旦你熟悉了它，那就是小菜一碟了。

$(document).ready() 函数在 html 完成渲染时调用，因此您应该在其中包含所有逻辑。

当用户点击该按钮时触发 $('button').click(function) {..}。

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

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

将数据从 javascript 传递到 HTML 标签

Passing Data from javascript to HTML tag

html

javascript

jquery

materialize

Javascript:

HTML模态代码：

我的代码 table HTML:

JQuery 我的 table HTML: