What could be the reason for my table row not showing up after clicking the button?

Question

What could be the reason for my table row not showing up after clicking the button?

Having trouble with a new drop-down row in a form. The drop-down is only showing in the first cell, even when using colspan=5.

Is there a better way to achieve this? Thank you for any help.

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="javascript:showElement('abcdata')" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" style="display:none;">
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>

  <tr>
  <td colspan=5>
  ADDED THIS tr/td IN EDIT : NOTHING HIDDEN.... DOES IT SHOW ALL ACROSS?? YES IT DOES
  </td>
  </tr>

</table>

javascript css html-table tr

Answer 1

Answer №1

Hey there! I'm not sure where you found the showElement function, but to make your row visible again, a simple way is to use abcdata.style.display=''

<button onclick="abcdata.style.display=''"

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="abcdata.style.display=''" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" style="display:none;">
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

Answer 2

Hey there! I'm not sure where you found the showElement function, but to make your row visible again, a simple way is to use abcdata.style.display=''

<button onclick="abcdata.style.display=''"

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="abcdata.style.display=''" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" style="display:none;">
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

Answer 3

Answer №2

function revealElement(id) {
  document.getElementById(id).classList.remove('hidden');
}

.hidden {
  display: none;
}

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="javascript:revealElement('abcdata')" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" class="hidden" >
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

I don't see your code but I assume you are using display: block to show the td.

My suggestion is to create a css class named hidden.

Apply it to the element you wish to hide.

To reveal the element, simply remove the class.

P.S. I advise against modifying specific properties with JS unless absolutely necessary.

Answer 4

function revealElement(id) {
  document.getElementById(id).classList.remove('hidden');
}

.hidden {
  display: none;
}

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="javascript:revealElement('abcdata')" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" class="hidden" >
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

I don't see your code but I assume you are using display: block to show the td.

My suggestion is to create a css class named hidden.

Apply it to the element you wish to hide.

To reveal the element, simply remove the class.

P.S. I advise against modifying specific properties with JS unless absolutely necessary.

Answer 5

Answer №3

It appears that there is a misunderstanding about the showElement() function being native to JavaScript. In reality, it's not. Once we incorporate the function into your code, everything should work as expected.

I suspect that you're used to working on projects where certain utility functions are provided by an external script or library.

<script>
  function showElement(id) {
    document.getElementById(id).style.display = 'table-row'; 
    // or just '' for a more generic implementation
  }
</script>

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="javascript:showElement('abcdata')" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" style="display:none;">
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

Answer 6

It appears that there is a misunderstanding about the showElement() function being native to JavaScript. In reality, it's not. Once we incorporate the function into your code, everything should work as expected.

I suspect that you're used to working on projects where certain utility functions are provided by an external script or library.

<script>
  function showElement(id) {
    document.getElementById(id).style.display = 'table-row'; 
    // or just '' for a more generic implementation
  }
</script>

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="javascript:showElement('abcdata')" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" style="display:none;">
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

What could be the reason for my table row not showing up after clicking the button?

Answer №1

Answer №2

Answer №3

Similar questions

Modify the value during the oninput event in TypeScript

Express server continuously returning 404 error for all requests originating from the index page

The transcription generated by the Google speech-to-text service came back blank when processing the audio captured by the MediaRecorder API within

Displaying JavaScript validation errors on a Bootstrap 4 .btn-group-toggle

What is the best way to configure a metered subscription plan on Stripe that invoices annually but bills extra fees for overage on a monthly basis

How to center an image within a WordPress .php file

What is the best way to vertically flip a background image that is repeating along the y axis in CSS?

Show only the relevant content, if no matches are found then indicate this

Steps for setting up node-openalpr on a Windows 10 system

Menu collapse button failing to Show content

While attempting to populate an array with data, I encountered the issue of receiving 'undefined' values within the

An alternative to Object.defineProperty for IE8

After clicking on a specific href element with a designated class, trigger the display of a custom dialog styled using CSS

Automatically wrapping and centering characters within pre tags in HTML

How are the script name and script file connected in WordPress enqueuing?

Managing browser back button functionality

Error: Psuedo After element fails to display

Display a div element on the page after 10 seconds of loading

Having difficulty shrinking the excessive gap between the image and text

Steps to seamlessly integrate puppeteer with an active Chrome instance or tab