如何获得价值

时间:2016-09-27 10:49:57

标签: javascript jquery html

我需要在<tr>中获取文字。这是我的HTML代码:

<table class="table" style="" id="tabella_username_aggiunti">
        <thead>
            <tr>
              <th>Username</th>
              <th>Cancella</th>
            </tr>
        </thead>
        <tbody id="tbody_aggiungi_utente"><tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr></tbody>
      </table>

我需要提取<td>中的第一个<tr>,即&#34; prova&#34;在这个例子中,我使用这个jquery代码:

$('#tbody_aggiungi_utente').children('tr').each(function(i) {
                                            console.log("TABELLA " + JSON.stringify(i)+" Tabella "+JSON.stringify($(this)));
                                            //array_user.push($(this).attr('id').replace('aggiungi', ''));

                                        });

但它不起作用,因为它打印了我TABELLA 0 Tabella {"0":{},"context":{},"length":1}

任何人都可以帮助我?

7 个答案:

答案 0 :(得分:1)

&#13;
&#13;
$('#tbody_aggiungi_utente').children('tr').each(function(i) {
 console.log("TABELLA " + JSON.stringify(i)+" Tabella "+$(this).first().text());
                                            //array_user.push($(this).attr('id').replace('aggiungi', ''));

                                        });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
        <thead>
            <tr>
              <th>Username</th>
              <th>Cancella</th>
            </tr>
        </thead>
        <tbody id="tbody_aggiungi_utente">
          <tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
  </tbody>
      </table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

使用children

$(this).children('td:eq(0)').html());

$('#tbody_aggiungi_utente > tr').each(function(i) {

  console.log("TABELLA " + JSON.stringify(i)+
              " Tabella "+JSON.stringify($(this).children('td:eq(0)').html()));
                                            
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
        <thead>
            <tr>
              <th>Username</th>
              <th>Cancella</th>
            </tr>
        </thead>
        <tbody id="tbody_aggiungi_utente">
          <tr id="aggiungiprova"><td>prova</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
          <tr id="aggiungiprova1"><td>prova1</td><td><button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i></button></td></tr>
     </tbody>
      </table>

答案 2 :(得分:1)

您应该使用更好的选择器而不是children。然后,您需要选择td内的each

&#13;
&#13;
$('#tbody_aggiungi_utente tr').each(function(i) {
    var firstTd = $("td:eq(0)", this);
    console.log("TABELLA " + JSON.stringify(i) + " Tabella " + JSON.stringify(firstTd.text()));
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table" style="" id="tabella_username_aggiunti">
  <thead>
    <tr>
      <th>Username</th>
      <th>Cancella</th>
    </tr>
  </thead>
  <tbody id="tbody_aggiungi_utente">
    <tr id="aggiungiprova">
      <td>prova</td>
      <td>
        <button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

或者直接循环td's

&#13;
&#13;
$('#tbody_aggiungi_utente tr td:first-of-type').each(function(i) {
    console.log("TABELLA " + JSON.stringify(i) + " Tabella " + JSON.stringify($(this).text()));
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table" style="" id="tabella_username_aggiunti">
  <thead>
    <tr>
      <th>Username</th>
      <th>Cancella</th>
    </tr>
  </thead>
  <tbody id="tbody_aggiungi_utente">
    <tr id="aggiungiprova">
      <td>prova</td>
      <td>
        <button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
        </button>
      </td>
    </tr>
    <tr id="aggiungiprova">
      <td>prova 2</td>
      <td>
        <button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

each(function(i)替换为each(function(i,v),然后console.log( $(v).text().trim());

输出将是'prova'

$('#tbody_aggiungi_utente').children('tr').each(function(i,v) {
  console.log( $(v).text().trim());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
    <thead>
    <tr>
        <th>Username</th>
        <th>Cancella</th>
    </tr>
    </thead>
    <tbody id="tbody_aggiungi_utente">
    <tr id="aggiungiprova">
        <td>prova</td>
        <td>
            <button id="eliminaprova" type="button" class="btn btn-danger btn-sm">
                <i class="fa fa-times" aria-hidden="true"></i></button>
        </td>
    </tr>
    </tbody>
</table>

答案 4 :(得分:0)

看看CSS Selectors。 jQuery可以使用相同的方法选择元素。

&#13;
&#13;
console.log(jQuery("#aggiungiprova td:first-child"));
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
  <thead>
    <tr>
      <th>Username</th>
      <th>Cancella</th>
    </tr>
  </thead>
  <tbody id="tbody_aggiungi_utente">
    <tr id="aggiungiprova">
      <td>prova</td>
      <td>
        <button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

这应该有用......

a = $('#tabella_username_aggiunti tr th')
console.log(a.text())

//or

a.each(function(a, el) {
  console.log($(el).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" style="" id="tabella_username_aggiunti">
  <thead>
    <tr>
      <th>Username</th>
      <th>Cancella</th>
    </tr>
  </thead>
  <tbody id="tbody_aggiungi_utente">
    <tr id="aggiungiprova">
      <td>prova</td>
      <td>
        <button id="eliminaprova" type="button" class="btn btn-danger btn-sm"><i class="fa fa-times" aria-hidden="true"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

答案 6 :(得分:0)

$("#aggiungiprova td").first().text();

给出名为“aggiungiprova”的tr中第一个td的内容。

如果您需要获取整个列表中的所有名称,那么:

var names = [];

$("#tabella_username_aggiunti tr").each(function(){
    names.push( $("td",this).first().text());
});

// names is now an array of all names

或者您将所有名称TD命名为[sic]并对其进行迭代,以便更容易阅读代码并加快执行速度:

<table>
<tr><td class="name-cell">My Name</td><td>other things</td></tr>
<tr><td class="name-cell">My Name</td><td>other things</td></tr>
</table>

JS:

$('.name-cell').each(function(){
    // $(this).text()
});