Javascript 文本框中的传输表TD_Javascript_Jquery_Html_Google Apps Script

Javascript 文本框中的传输表TD

javascript jquery html google-apps-script

Javascript 文本框中的传输表TD,javascript,jquery,html,google-apps-script,Javascript,Jquery,Html,Google Apps Script,这是我在表格中填充数据的方式 <script> function GenerateTable() { <? var data = getData(); ?> var table = document.getElementById("TableContainer"); <? for (var i = 12; i < data.length; i++) { ?> var getval; var row =

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

<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>


函数GenerateTable（）{
var table=document.getElementById（“TableContainer”）；
var getval；
var行=table.insertRow（-1）；
var row_did=row.insertCell（0）；
var row_area=行插入单元格（1）；
var row_cusname=row.insertCell（2）；
var row_pic=行插入单元格（3）；
var行注释=行插入单元格（4）；
var row_status=row.INSERCELL（5）；
var row_docudate=row.insertCell（6）；
var row_按钮=row.INSERCELL（7）；
row_did.innerHTML=''++''；
row_area.innerHTML=''++''；
行_cusname.innerHTML=''++''；
行pic.innerHTML=''++''；
row_rements.innerHTML=''++''；
行_status.innerHTML=''++''；
row_docudate.innerHTML=''++''；
row_button.innerHTML=''；
}

这是我的表格，我把数据放在上面代码的基础上

<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>


#
地区
客户名称
负责人
评论
地位
博士。日期

请容忍我。这段代码运行得很好，我是通过

“

来运行代码的。然而，正如您在我的代码中看到的一样，有一段代码看起来是这样的

<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传输到textbox和其他元素，这是我的代码

<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>


$（'.click to select'）。单击（function（）{
var dataid=$（this.nexist（'tr'）.find（'td.dataid'）.text（）；
var area=$（this.closest（'tr'）.find（'td.area'）.text（）；
var cusname=$（this.nexist（'tr'）.find（'td.cusname'）.text（）；
var cicpoption=$（this.closest（'tr'）.find（'td.cic'）.text（）；
var备注=$（this.closest（'tr'）.find（'td.comments'）.text（）；
var statoption=$（this.closest（'tr'）.find（'td.status'）.text（）；
var documentdate=$（this.closest（'tr'）.find（'td.docdate'）.text（）；
$（'#dataid'）.val（dataid）
$（'#areaoption'）.val（面积）
$（'#cusname'）.val（cusname）
$（'cicpoption'）.val（cicpoption）
$（'备注'）.val（备注）
$（'#statoption'）.val（statoption）
$（'#documentdate'）.val（documentdate）
});

这就是当我点击图片时错误开始的地方。行数据没有在我的文本框中传输。错误是什么

更新代码

<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>


函数GenerateTable（）{
var table=document.getElementById（“TableContainer”）；
var行=table.insertRow（-1）；
var row_did=row.insertCell（0）；
var row_area=行插入单元格（1）；
var row_cusname=row.insertCell（2）；
var row_pic=行插入单元格（3）；
var行注释=行插入单元格（4）；
var row_status=row.INSERCELL（5）；
var row_docudate=row.insertCell（6）；
var row_按钮=row.INSERCELL（7）；
row_did.innerHTML=''++''；
row_area.innerHTML=''++''；
行_cusname.innerHTML=''++''；
行pic.innerHTML=''++''；
row_rements.innerHTML=''++''；
行_status.innerHTML=''++''；
row_docudate.innerHTML=''++''；
row_button.innerHTML=''；
$（'.click to select'）。单击（function（）{
var dataid=$（this.nexist（'tr'）.find（'td.dataid'）.text（）；
var area=$（this.closest（'tr'）.find（'td.area'）.text（）；
var cusname=$（this.nexist（'tr'）.find（'td.cusname'）.text（）；
var cicpoption=$（this.closest（'tr'）.find（'td.cic'）.text（）；
var备注=$（this.closest（'tr'）.find（'td.comments'）.text（）；
var statoption=$（this.closest（'tr'）.find（'td.status'）.text（）；
var documentdate=$（this.closest（'tr'）.find（'td.docdate'）.text（）；
$（'#dataid'）.val（dataid）
$（'#areaoption'）.val（面积）
$（'#cusname'）.val（cusname）
$（'cicpoption'）.val（cicpoption）
$（'备注'）.val（备注）
$（'#statoption'）.val（statoption）
$（'#documentdate'）.val（documentdate）
});
}

TYSM

能否将第二个脚本

$（'.click to select'）。在GenerateTable（）的内部和for循环之后单击（function（）{…}）
？然后将console.log（'dataid为：'+dataid）
放在这里，检查单击处理程序是否正在运行
$('.click-to-select').click(function(){...
  ...
  var documentdate = $(this).closest('tr').find('td.docdate').text();

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

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

我无法确定代码的执行顺序，因为这里有两个单独的脚本标记，但第二个脚本可能无法绑定单击处理程序，因为。单击以选择s尚未由GenerateTable（）
创建
这是一个使用第n个类型选择器的工作，首先需要从td中删除id，因为其中一些与textbox元素匹配
然后用下面的代码行替换它，并对每列执行相同的操作
var dataid =  $(this).parent().siblings('.dataid').text();

我认为，这个函数应该如下所示
不要使用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)
});


}

函数GenerateTable（）{
var data=getData（）；
var table=document.getElementById（“TableContainer”）；
对于（var i=12；i