We help IT Professionals succeed at work.

How to show table cell when cell value changed

mikezang
mikezang asked
on
I have a form as below, the sFilename will be changed in aspx.cs, I hope the table will be showed after sFilename changed, what can I do?
    <table border=0>
        <tr class='result'><th width=120>¿¿¿¿¿¿¿</th><th width=120>¿¿¿¿¿</th><th width=120>¿¿¿¿¿¿¿¿</th></tr>
        <tr class='result'><td align=center id='filename'><% =sFilename %></td><td align=center><% =sGoods %></td><td align=center><% =sResult %></td></tr>
    </table><br /><br />

<script type="text/javascript">
    $(document).ready(function() {
        $('.result').hide();

        $('#filename').change(function() {
            $('.result').show();
        });
    });
</script>

Open in new window

Comment
Watch Question

Chinmay PatelChief Technology Ninja
Distinguished Expert 2019

Commented:
Hi mikezang,
How about using onreadystatechange on the TD?
http://msdn.microsoft.com/en-us/library/ms536957(VS.85).aspx
Try attaching this event and then change the visibility.
Let me know if you need help on that.
Regards,
Chinmay


Author

Commented:
Thanks for your answer, can you give me a sample.
I have a table in hide mode, when I change the cell value, I hope the table will be showed, that's all, can you help me?
Chinmay PatelChief Technology Ninja
Distinguished Expert 2019

Commented:
Sure. Check this out
<table id="myTable" border=0 onreadystatechange="checkTable();">
        <tr class='result'><th width=120>¿¿¿¿¿¿¿</th><th width=120>¿¿¿¿¿</th><th width=120>¿¿¿¿¿¿¿¿</th></tr>
        <tr class='result'><td align=center id='filename'><% =sFilename %></td><td align=center><% =sGoods %></td><td align=center><% =sResult %></td></tr>
    </table><br /><br />



<Script>

function checkTable()
{
// After && check whether your cell has the value or not
   if (document.readyState=="complete" && <<Check whether the cell has a value>>)
   {
      document.getElementByTable("myTable").style.display : block;
   }
}

</Script>

Author

Commented:
The problem is I don't know how to check the cell has a value, that is what I want to know
I tried .chage(function().., it seems like not work, how can I check the cell value?

<script type="text/javascript">
    $(document).ready(function() {
        $('.result').hide();

        $('#filename').change(function() {
            $('.result').show();
        });
    });
</script>
Chinmay PatelChief Technology Ninja
Distinguished Expert 2019

Commented:
Sure. Give your cell an id like I've given. and check it's innerText property.


table id="myTable" border=0 onreadystatechange="checkTable();">
       <tr class='result'><th width=120 id="myCell">¿¿¿¿¿¿¿</th><th width=120>¿¿¿¿¿</th><th width=120>¿¿¿¿¿¿¿¿</th></tr>
       <tr class='result'><td align=center id='filename'><% =sFilename %></td><td align=center><% =sGoods %></td><td align=center><% =sResult %></td></tr>
   </table><br /><br />



<Script>

function checkTable()
{

// After && check whether your cell has the value or not
   if (document.readyState=="complete" && document.getElementById("myCell").innerText.length > 0)
  {
      document.getElementByTable("myTable").style.display : block;
  }
}

</Script>

Author

Commented:
sorry, can you give me a code as blow? I am very new for ajax.

<script type="text/javascript">
    $(document).ready(function() {
        $('.result').hide();

        $('#filename').innerText.length(function() {
            $('.result').show();
        });
    });
</script>
Chinmay PatelChief Technology Ninja
Distinguished Expert 2019

Commented:
We are not using AJAX in the code I've shown. It is RAW JavaScript. Why you need to use AJAX?
are you using AJAX to get the filename after the page is loaded?

Author

Commented:
I have to use AJAX, because I can do it if not use AJAX:)
Chinmay PatelChief Technology Ninja
Distinguished Expert 2019

Commented:
are you using AJAX to get the filename after the page is loaded?

Author

Commented:
the filename is a id of table td, I updated my page using aspx, then I hope the table is showed after I updated the cell of table.
Commented:
Well, I got what I need as below:

<script type="text/javascript">
    $(document).ready(function() {
        if ($("#fn")[0].innerText) {
            $('.result').show();
        }
        else {
            $('.result').hide();
        }
    });
</script>