Dynamically adding colspan and removing the next td

Question

I have a 3*3 table. I need to remove 3rd column if there is no content to display in it.In my js file I wrote something like below.

$('table tbody tr td').each(function () {
  if (tempHTML.indexOf("@E") !== -1) {    // true
    $(this).attr("colspan", 2);
    $(this).next("td").remove();         // removes extra td 
  }
});

tempHtml is my html, in my js file what should be the this to set colspan attribute?

Expected result is to increase the colspan and remove the next td and to have a 3*2 table. Please explain with detail as I'm new to js and html.

Can you post the html of the table as well? – nixkuroi Jul 19 '19 at 17:22 — nixkuroi, Jul 19 '19 at 17:22

Mister Jojo · Accepted Answer · 2019-07-22T16:31:02.163

1

As nobody seems interested in answering you, and you asked how to realize your request in javascript, in spite of having presented code in jQuery, here is a solution:

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>

explanations for: (arrow functions)

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

this is like :

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

so, for the complete code this is :

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>

I also changed the test about your @E value
regular expression to test if xTD.textContent contain '@E'

please read How to check whether a string contains a substring in JavaScript?

edited Jul 22 '19 at 16:31

answered Jul 19 '19 at 18:09

Mister Jojo

20,093
6
21
40

You should edit the first sentence for an explanation of why this is working and how... – A. Meshu Jul 19 '19 at 18:20
where is xTD defined? – user11809245 Jul 19 '19 at 19:31
`xTD` is the argument of the function (in the method .forEach) on this line `.forEach(xTD=>` see https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#Accessing_the_matches – Mister Jojo Jul 19 '19 at 23:25
The above code gives me a syntax error. When I write the below line .forEach(xTD=> { if (xTD.textContent==='') { I get error. – user11809245 Jul 22 '19 at 15:05
I modified it to below to fix the syntax error cTableBody.querySelectorAll('td:nth-child(3)').forEach(function (xTD) { if (xTD.textContent === '@E') { let pTR = xTD.parentElement – user11809245 Jul 22 '19 at 15:06
Now it complains saying xTD is undefined. How can I loop through each TD? how to make it realize that XTD is the value(td)? – user11809245 Jul 22 '19 at 15:08
Also how can I post code in the comment box more clearly?Is there any keyboard shortcut specific to the comments box? – user11809245 Jul 22 '19 at 15:10
give me a few minutes to show your points of syntax .. (do you have the correct parentheses for the beginning and the end?) and respect the parentheses too? – Mister Jojo Jul 22 '19 at 15:48
@user11809245 and please, when you got a error, you have to show the complete error message – Mister Jojo Jul 22 '19 at 15:54
"ReferenceError: xTD is not defined at eval (eval at srvOnSuccessCallback at Object.success at fire (https://localhost/Scripts/jQuery/core/jquery-1.10.2.js:3062:30) at Object.fireWith [as resolveWith] (https://localhost/Scripts/jQuery/core/jquery-1.10.2.js:3174:7) at done (https://localhost/Scripts/jQuery/core/jquery-1.10.2.js:8248:14) at XMLHttpRequest.callback (https://localhost/Scripts/jQuery/core/jquery-1.10.2.js:8791:8)" – user11809245 Jul 22 '19 at 17:39
In Javascript I know we need not to define the parameters before, but for me the control doesn't enter the if loop as xDT is not defined. How can I fix this? – user11809245 Jul 22 '19 at 17:41
my code is **javascript** not *jQuery* - **MyTableBody** (const) is a pure **javascript** element, not a *jQuery* one. It looks like you have mixed the 2 things, my code does not use jQuery – Mister Jojo Jul 22 '19 at 19:51
@user11809245 see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector and https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll – Mister Jojo Jul 22 '19 at 22:24
Thank you very much Mister Jojo. You were right I mixed couple of things. Once I cleaned my code and implemented it like you showed, everything is working as expected. – user11809245 Jul 24 '19 at 20:56

nixkuroi · Answer 2 · 2019-07-19T18:46:16.153

1

There are a couple of things you need to do:

First, if you're using each, you should pass in the index and the value. Then use the value when getting tempHTML, and doing your modifications to the 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>

edited Jul 19 '19 at 18:46

answered Jul 19 '19 at 18:10

nixkuroi

2,259
1
19
25

I don't know where this css style came from. I didn't add it. – nixkuroi Jul 19 '19 at 18:29
@MisterJojo I removed the CSS. I don't know how it got in there. I did test the rest of the code, and it works fine in Chrome. – nixkuroi Jul 19 '19 at 18:31
The code the asker wrote says that if tmpHTML contains @E, then you set that TD to colspan=2, then delete the next column. That's what my code does. – nixkuroi Jul 19 '19 at 18:38
Ok, I finally understand what you're saying now. The TD's need backslashes. Thanks for the heads up. I thought you were talking about the script. – nixkuroi Jul 19 '19 at 18:43
the PO ask : _"I need to remove 3rd column if there is no content to display in it."_ the `@E` come from nowhere.. – Mister Jojo Jul 19 '19 at 18:45
@MisterJojo This is from the original code in the question: if (tempHTML.indexOf("@E") !== -1) – nixkuroi Jul 19 '19 at 18:47
I know that, but this is not the question. – Mister Jojo Jul 19 '19 at 18:48

Dynamically adding colspan and removing the next td

2 Answers2