在文本框中传输表 TD答案

【问题标题】：Transfer Table TD in textbox在文本框中传输表 TD
【发布时间】：2017-07-23 05:45:02
【问题描述】：

这是我在表格中填充数据的方式。

<script>
function GenerateTable() {
    <? var data = getData(); ?> 

    var table = document.getElementById("TableContainer");

    <? for (var i = 12; i < data.length; i++) { ?>
      var getval;
      var row = table.insertRow(-1);
      var row_did = row.insertCell(0);
      var row_area = row.insertCell(1);
      var row_cusname = row.insertCell(2);
      var row_pic = row.insertCell(3);
      var row_remarks = row.insertCell(4);
      var row_status = row.insertCell(5);
      var row_docudate = row.insertCell(6);
      var row_button = row.insertCell(7);

      row_did.innerHTML =      '<td  id="dataid" class="dataid">'+ <?= data[i][0] ?> + '</td>';
      row_area.innerHTML =     '<td  id="area" class="area">'+ <?= data[i][1] ?> +'<td>';
      row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' + <?= data[i][2] ?>  +'<td>';
      row_pic.innerHTML =      '<td  id ="cic" class="cic">' + <?= data[i][3] ?>  +'<td>';
      row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + <?= data[i][4] ?>  +'<td>';
      row_status.innerHTML =   '<td  id ="status" class="status">' +<?= data[i][5] ?>  +'<td>';
      row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+ <?= data[i][6] ?>  +'<td>';
      row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src="https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

<? } ?>
}
</script>

这是我根据上面的代码放置数据的表格。

<table  id = "TableContainer" cellspacing="2" cellpadding="3" width ="100%" align = "center" class="hoverTable">
   <tr>
   <th  bgcolor = "darkgreen"><font color="white">#</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Area</font></th>
   <th  bgcolor = "darkgreen" width = "200px"><font color="white">Customer Name</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Person In Charge</font></th>
   <th  bgcolor = "darkgreen" width = "250px"><font color="white">Remarks</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Status</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Doc. Date</font></th>
   <th  bgcolor = "darkgreen"></th>
   </tr>
   <tr>

   </tr>
</table>

请多多包涵。这段代码运行良好，我正在通过'<body onLoad = "GenerateTable()"> 运行代码，但正如您在我的代码中看到的那样，有一个看起来像这样的代码。

<td><img id = "selectdata" class = "click-to-select" src="https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

现在它将为我的表格中的每一行创建一个图像按钮，该代码有一个目的，就是将数据从 td 传输到文本框和其他元素，这是我的代码。

<script>
$('.click-to-select').click(function() {
    var dataid = $(this).closest('tr').find('td.dataid').text();
    var area = $(this).closest('tr').find('td.area').text();
    var cusname = $(this).closest('tr').find('td.cusname').text();
    var cicoption = $(this).closest('tr').find('td.cic').text();
    var remarks = $(this).closest('tr').find('td.remarks').text();
    var statoption = $(this).closest('tr').find('td.status').text();
    var documentdate = $(this).closest('tr').find('td.docdate').text();

    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)
});
</script>

这是我单击图像时错误开始的地方，行数据未在我的文本框中传输什么错误？

更新代码

<script>
function GenerateTable() {
    <? var data = getData(); ?> 

    var table = document.getElementById("TableContainer");

    <? for (var i = 12; i < data.length; i++) { ?>
      var row = table.insertRow(-1);
      var row_did = row.insertCell(0);
      var row_area = row.insertCell(1);
      var row_cusname = row.insertCell(2);
      var row_pic = row.insertCell(3);
      var row_remarks = row.insertCell(4);
      var row_status = row.insertCell(5);
      var row_docudate = row.insertCell(6);
      var row_button = row.insertCell(7);

      row_did.innerHTML =      '<td  id="dataid" class="dataid">'+ <?= data[i][0] ?> + '</td>';
      row_area.innerHTML =     '<td  id="area" class="area">'+ <?= data[i][1] ?> +'<td>';
      row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' + <?= data[i][2] ?>  +'<td>';
      row_pic.innerHTML =      '<td  id ="cic" class="cic">' + <?= data[i][3] ?>  +'<td>';
      row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + <?= data[i][4] ?>  +'<td>';
      row_status.innerHTML =   '<td  id ="status" class="status">' +<?= data[i][5] ?>  +'<td>';
      row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+ <?= data[i][6] ?>  +'<td>';
      row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src= "https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

<? } ?>

$('.click-to-select').click(function() {
    var dataid = $(this).closest('tr').find('td.dataid').text();
    var area = $(this).closest('tr').find('td.area').text();
    var cusname = $(this).closest('tr').find('td.cusname').text();
    var cicoption = $(this).closest('tr').find('td.cic').text();
    var remarks = $(this).closest('tr').find('td.remarks').text();
    var statoption = $(this).closest('tr').find('td.status').text();
    var documentdate = $(this).closest('tr').find('td.docdate').text();

    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)
});

}
</script>

TYSM

【问题讨论】：

这里的代码太多，无法模拟。你能创造一个小提琴吗？ jsfiddle.net
这对我来说很难，因为它是在谷歌脚本中创建的。我的意思是您看到的所有代码都在 google sheet 中

标签： javascript jquery html google-apps-script

【解决方案1】：

您能否将您的第二个脚本 $('.click-to-select').click(function(){...}) 放在 GenerateTable() 内并在 for 循环之后？然后通过在此处输入console.log('The dataid is:' + dataid) 来检查点击处理程序是否正在运行。

$('.click-to-select').click(function(){...
  ...
  var documentdate = $(this).closest('tr').find('td.docdate').text();

  console.log('The dataid is:' + dataid)

  $('#dataid').val(dataid)
  ...
}

我无法确定您的代码执行的顺序，因为您在这里有两个单独的脚本标签，但您的第二个脚本可能无法绑定点击处理程序，因为尚未创建 .click-to-selects GenerateTable().

这是一个使用 nth-of-type 选择器的工作 fiddle

【讨论】：

我尝试了你所做的，但没有任何反应，它在文本框中给了我一个空值。请查看更新后的代码。
查看编辑，那里的日志会告诉你 1）点击处理程序是否在点击时运行，2）从表格中抓取文本是否有其他问题
好的，现在点击可以工作了，你需要抓取文本。我不确定您的选择器是否正常工作，我什至不确定您是否可以在元素上拥有类和 id，所以如何使用像这样的 nth-of-type 选择器 var dataid= $(this).closest('tr').find('td:nth-of-type(1)').text(); 只是增加数字你去在列表中。
我们有一个赢家哈哈玩笑。 TYSM 的大帮助

【解决方案3】：

我想，这个函数应该像下面这样不要使用 php 标签，因为它们是 javascript 变量。

function GenerateTable() {
   var data = getData();  

   var table = document.getElementById("TableContainer");

  for (var i = 12; i < data.length; i++) { 
     var row = table.insertRow(-1);
     var row_did = row.insertCell(0);
     var row_area = row.insertCell(1);
     var row_cusname = row.insertCell(2);
     var row_pic = row.insertCell(3);
     var row_remarks = row.insertCell(4);
     var row_status = row.insertCell(5);
     var row_docudate = row.insertCell(6);
     var row_button = row.insertCell(7);

  row_did.innerHTML =      '<td  id="dataid" class="dataid">'+  data[i][0]  + '</td>';
  row_area.innerHTML =     '<td  id="area" class="area">'+  data[i][1] +'<td>';
  row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' +  data[i][2]   +'<td>';
  row_pic.innerHTML =      '<td  id ="cic" class="cic">' +  data[i][3]   +'<td>';
  row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + data[i][4]  +'<td>';
  row_status.innerHTML =   '<td  id ="status" class="status">' + data[i][5]   +'<td>';
  row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+  data[i][6]   +'<td>';
  row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src= "https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

    } 

$('.click-to-select').click(function() {
   var dataid = $(this).closest('tr').find('td.dataid').text();
   var area = $(this).closest('tr').find('td.area').text();
   var cusname = $(this).closest('tr').find('td.cusname').text();
   var cicoption = $(this).closest('tr').find('td.cic').text();
   var remarks = $(this).closest('tr').find('td.remarks').text();
   var statoption = $(this).closest('tr').find('td.status').text();
   var documentdate = $(this).closest('tr').find('td.docdate').text();

    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)
});


}

希望对你有所帮助。

【讨论】：

它不是 php，它的谷歌应用脚本脚本...在回答之前检查标签
@Ritz 感谢您了解标签。但是，当我检查 Google App Script 时，也不要使用这些 (= ?> , ?>) 标签。
通过这个Google App Script Documentation