Question

我有一张3 * 3的桌子。如果其中没有要显示的内容，我需要删除第三列。在我的js文件中，我写了如下内容。

create or replace function hex_to_bin(h varchar, number_of_bits int)
returns varchar immutable as $$
    return bin(int(h,32))[2:].zfill(number_of_bits)
$$ language plpythonu;

select hex_to_bin('4D',10);

hex_to_bin
0010001101

$('table tbody tr td').each(function () { if (tempHTML.indexOf("@E") !== -1) { // true $(this).attr("colspan", 2); $(this).next("td").remove(); // removes extra td } });是我的html，在我的js文件中，设置tempHtml的colspan属性应该是什么？

预期结果是增加colspan并删除下一个td并具有3 * 2的表。由于我是js和html的新手，请详细解释。

Answer 1

由于似乎没有人愿意回答您，所以尽管在jQuery中提供了代码，您还是问如何用javascript实现您的请求，这是一个解决方案：

const MyTableBody = document.querySelector('#Table-3cols tbody')
  ,   BtRemC3     = document.querySelector('#Bt-Clean-col3')


BtRemC3.onclick=_=>
  {
  MyTableBody
    .querySelectorAll('td:nth-child(3)')
    .forEach(xTD=>
      {
      if (xTD.textContent==='')
        {
        let pTR = xTD.parentElement
        pTR.removeChild(xTD)
        pTR.cells[1].colSpan = 2
        }
      }
    )
  }

table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey;  padding: .6em 1em}
thead { font-weight: bold }

<button id="Bt-Clean-col3">Remove empty Cols 3</button>

<table id="Table-3cols">
  <thead>
    <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr>
  </thead>
  <tbody>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td></td>   </tr>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td></td>   </tr>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
  </tbody>
</table>

解释：（箭头功能）

BtRemC3.onclick=_=>
  {
  MyTableBody
    .querySelectorAll(`td:nth-child(3)`)
    .forEach(xTD=>
      {

这就像：

BtRemC3.addEventListener('click', function()
{
  MyTableBody.querySelectorAll('td:nth-child(3)').forEach( function(xTD)
  {

因此，对于完整的代码，这是：

const MyTableBody = document.querySelector('#Table-3cols tbody')
  ,   BtRemC3     =  document.querySelector('#Bt-Clean-col3')
  ;
  
BtRemC3.addEventListener('click', function()
{
  MyTableBody.querySelectorAll('td:nth-child(3)').forEach( function(xTD)
  {
    if (/@E/.test(xTD.textContent) ) // previously  (xTD.textContent==='')
    {
      let pTR = xTD.parentElement;
      pTR.removeChild(xTD);
      pTR.cells[1].colSpan = 2;
    }
  });
});

table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey;  padding: .6em 1em}
thead { font-weight: bold }

<button id="Bt-Clean-col3">Remove Cols 3 with '@E'</button>

<table id="Table-3cols">
  <thead>
    <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr>
  </thead>
  <tbody>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td>blah blah blah@E  blah </td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td>blah blah@E  blah </td> </tr>
      <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr>
  </tbody>
</table>

我还更改了有关您的@E值的测试
测试xTD.textContent是否包含'@E'的正则表达式

请阅读How to check whether a string contains a substring in JavaScript?

Answer 2

您需要做几件事：

首先，如果要使用它们，则应传递索引和值。然后在获取tempHTML并修改HTML时使用该值。

$('table tbody tr td').each(function (i,f) {
    var tempHTML = $(f).text();

    if (tempHTML.indexOf("@E") !== -1) { //true
        $(f).attr("colspan", 2);
        $(f).next().remove();
    }
});

table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey;  padding: .6em 1em}
thead { font-weight: bold }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>ABC</td>
    <td>DEF</td>
    <td>GHI</td>
  </tr>
  <tr>
    <td>AEC</td>
    <td>D@EF</td>
    <td>GHI</td>
  </tr>
  <tr>
    <td>ABC</td>
    <td>DEF</td>
    <td>GHI</td>
  </tr>
</table>

动态添加colspan并删除下一个td

2 个答案: