Jquery/Javascript如何动态添加td(table)

Question

I need help, any ideas?

Firstly i want to hide some input element when page open, My approach creating dropdown $counter (1-8) and then depending on $counter Example:3.

I create/show existing element dynamically ($counter)<td></td> inside tr #ID.

How jQuery solve this problem?

Can u provide me example of switch case in jQuery to show/hide with defined td #ID?

Thanks Before

Rizq

Answer 1

To hide a cell row , you can do this:

$("#your_td").closest("tr").hide();

That's becasuse it's more logical to hide all the row than a single cell.

Hope to have understood you.

Answer 2

Suppose your input has id of "input-1", then you can hide it simply doing:

// Assign a value to counter, might be some function to do that
var counter = '1';

// Get a reference to the element and hide it
var input = document.getElementById('input-' + counter);
input.style.display = 'none';

// or 

input.style.visibility = 'hidden';

and to show it again:

input.style.display = ''; // empty string

// or 

input.style.visibility = 'visible';

The difference between the display and visibility properties is that the former will remove the element completely from the document flow, whereas the second will just make it invisible (read the relevant parts of the W3C CSS spec). Messing with display might make the document jump about a bit as it reflows, messing with visibility keeps it stable but leaves a blank space. Your choice which suits best.

You can hide and show any kind of element using the same method. If you want the parent cell or row, go up the parentNode chain till you hit the first TD or TR as appropriate and hide it.

There is a bit of a tutorial on the Mozilla developer site for messing with table elements using the DOM APIs.