Question

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

<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

Answer 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-select尚未绑定由GenerateTable()创建。

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

Answer 2

首先，您需要从td中删除id，因为其中一些与textbox元素匹配。

然后用下面的代码行替换它，并对每列执行相同的操作。

var dataid =  $(this).parent().siblings('.dataid').text();

Answer 3

我认为，此功能应如下所示不要使用php标签，因为这些是javascript变量。

'1'

希望它可以帮助你。

在文本框中传输表格TD

3 个答案: