使用jquery

Question

我有这个表用html写的php和bootstrap：

<table id="tabela-resultado" class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Ativo</th>
                            <th class="text-center">Ação</th>
                        </tr>
                    </thead>
                    <tbody>

                    <?php if(count($records)) { ?>
                    <?php foreach($records as $record) { ?> 


                        <tr data-id="<?php echo $record->id; ?>">

                            <td><?php echo $record->nome; ?></td>
                            <td>
                                <?php 

                                    if ($record->ativo == 1) {
                                        echo "SIM"; 
                                    } else if($record->ativo == 0){
                                        echo "NÂO"; 
                                    }
                                ?>
                            </td>

                            <td>
                                <?php echo anchor("gurpoProduto/excluir", "<i class='glyphicon glyphicon-trash'></i> Exlcuir", ['class' => 'btn btn-danger btn-block', 'name' => 'delete']); ?>
                            </td>
                        </tr>

                    <?php
                        }
                      }
                    ?>


                    </tbody>
                </table>

我正在尝试使用此函数在jquery中找到第一列中的元素。 Tihs的功能是：

function verificar_existencia(nome) {

        var table = $("#tabela-resultado tbody");
        var nomeTabela = '';

        table.find('tr').each(function (nome) {
        var $tds = $(this).find('td'),
            nomeTabela = $tds.eq(0).text()


        });

        if(trim(nome.toUpperCase()) === trim(nomeTabela.toUpperCase())) { 

                toastr.success("This element already exists!!!", "Aviso");
                //return false; 
        }   
    }

但不起作用。什么是错的？我需要在表中找到一个元素来防止表中的重复元素。

Answer 1

您循环遍历所有行并在每次迭代时覆盖nomeTabela。

因此，一旦循环完成，它就是仅在最后一行中找到的值，这是您在

上进行的比较

在循环内检查每一行的每个值，如：

function verificar_existencia(nome) {
    nome = nome.trim().toUpperCase();

    var table = $("#tabela-resultado tbody");
    var isMatch = false;


    table.find('tr').each(function(nome) {
      var $tds = $(this).find('td');
      var nomeTabela = $(this).find('td').eq(0).text();
      // compare each value inside the loop
      if (nome === nomeTabela.trim().toUpperCase()) {
        isMatch = true;
        return false; /// break the loop when match found
      }

    });

    if (isMatch) {

      toastr.success("This element already exists!!!", "Aviso");
      //return false; 
    }

}

另请注意您在浏览器控制台

中错误地使用了String#trim()错误

Answer 2

这是一种识别表格第一列中的欺骗字符串的方法。

＆＃13;

＆＃13;

var $trs = $("table tr"), dupes = [];

function san(str) {
  return str.text().trim().toUpperCase();
}

$trs.each(function() {
  var origTd = $(this).find("td:first"), origTr = $(this);
  $trs.each(function() {
    var newTd = $(this).find("td:first"),
      newTr = $(this),
      origTrIdx = origTr.index(),
      newTrIdx = newTr.index(),
      origTdStr = san(origTd),
      newTdStr = san(newTd);
    if (
      origTrIdx > newTrIdx &&
      dupes.indexOf(origTdStr) < 0 &&
      origTdStr === newTdStr
    ) {
      dupes.push(origTdStr);
      console.log(
        'This element "' +
          origTd.text() +
          '" already exists!!!'
      );
      return false;
    }
  });
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>unique</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>unique2</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>unique2</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>unique2</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;