如何根据JQuery条件将表移动到DIV容器的顶部？ [英] How to move table to the top of the DIV container based on a Condition with JQuery?

问题描述

我有多个表格堆叠在div容器内，如下所示：

 < div id =myContentstyle = display：block;> 
< table id =myTablecellspacing =0cellpadding =0> 
< tbody> 
< tr> 
< td style =padding-top：10px;> 
< table> 
< tbody> 
< tr> 
< td align =left> 
保健
< / td> 
< / tr> 
< tr> 
< td align =left> 
 20 Wisconsin Ave< / td> 
< / tr> 
< tr> 
< td align =left> 
 641.235.5900 
< / td> 
< / tr> 
< tr> ¥b $ b< td align =left> 
没有网站
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / td> 
< td align =right> 
< img src =images / phone.pngclass =imgHeader> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< table id =myTablecellspacing =0cellpadding =0> 
< tbody> 
< tr> 
< td style =padding-top：10px;> 
< table> 
 < tr> 
< td align =left>住房< / td> 
< / tr> 
< tr> 
< td align =left> 
 N / A< / td> 
< / tr> 
< tr> 
< td align =left> 
 641.255.3884 
< / td> 
< / tr> 
< tr> 
< td align =left> 
 www.housingl.org 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / td> 
< td align =right> 
< img src =images / phone.pngclass =imgHeader> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< table id =myTablecellspacing =0cellpadding =0> 
< tbody> 
< tr> 
< td style =padding-top：10px;> 
< table> 
< tbody> 
< tr> 
< td align =left> 
就业< / td> 
< / tr> 
< tr> 
< td align =left> N / A< / td> 
< / tr> 
< tr> 
< td align =left> 
 641.743.0500 
< / td> 
< / tr> 
< tr> 
< td align =left> 
 http://www.noexperience.org 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / td> 
< td align =right> 
< img src =images / phone.pngclass =imgHeader> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
  

我试图运行一个条件来找到带有N / A的TD，最佳。这是一个额外的问题bult在我上一个问题的顶部：

查找文本N / A并将图像隐藏在表的下一个TD

我有一个启动麻烦这个代码。

$

  $（'td：contains（N / A） '）.closest（'table'）。prependTo（'＃myContent'）; 
  

jsFiddle示例

I have multiple tables stacked inside a div container as below:-

<div id="myContent"  style="display: block;">
      <table id="myTable" cellspacing="0" cellpadding="0" >
        <tbody>
          <tr>
            <td style="padding-top: 10px;">
              <table>
                <tbody>
                  <tr>
                    <td align="left">
                      Health Care
                    </td>
                  </tr>
                  <tr>
                    <td align="left">
                      20 Wisconsin Ave</td>
                  </tr>
                  <tr>
                    <td align="left">
                      641.235.5900
                    </td>
                  </tr>
                  <tr>
                    <td align="left">
                      No website
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td align="right">
              <img src="images/phone.png" class="imgHeader" >
            </td>
          </tr>
        </tbody>
      </table>
      <table id="myTable" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td style="padding-top: 10px;">
              <table >
                <tbody>
                  <tr>
                    <td align="left">Housing</td>
                  </tr>
                  <tr>
                    <td align="left">
                      N/A</td>
                  </tr>
                  <tr>
                    <td align="left">
                      641.255.3884
                    </td>
                  </tr>
                  <tr>
                    <td align="left">
                      www.housingl.org
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td align="right">
              <img src="images/phone.png" class="imgHeader" >
            </td>
          </tr>
        </tbody>
      </table>
      <table id="myTable" cellspacing="0" cellpadding="0" >
        <tbody>
          <tr>
            <td style="padding-top: 10px;">
              <table>
                <tbody>
                  <tr>
                    <td align="left">
                      Employment</td>
                  </tr>
                  <tr>
                    <td align="left">N/A</td>
                  </tr>
                  <tr>
                    <td align="left">
                      641.743.0500
                    </td>
                  </tr>
                  <tr>
                    <td align="left">
                      http://www.noexperience.org
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td align="right">
              <img src="images/phone.png" class="imgHeader" >
            </td>
          </tr>
        </tbody>
      </table>
    </div>

I am trying to run a condition to find the TD with N/A and move those tables to the top. This is an additional question bult on the top of my previous question:

Finding the text "N/A" and hiding an image in table's next TD

I have a starting trouble with this code. Any support is appreciated.

解决方案

$('td:contains(N/A)').closest('table').prependTo('#myContent');

jsFiddle example

这篇关于如何根据JQuery条件将表移动到DIV容器的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！