Question

我在使用js函数删除字段时遇到问题。首先，我生成的数据与数据库表中的条目一样多：

function queryComposant($param) {
    $query = "SELECT nom_" . $param . " FROM " . $param . ";";
    $result = connectdb()->query($query)or die("Err " . $query);
    $resultat = $result->fetch(PDO::FETCH_OBJ);
    echo '<table border = "1" id="table' . $param . '">';

    foreach ($resultat as $value) {

    }

    while ($resultat = $result->fetch(PDO::FETCH_OBJ)) {

        echo '<tr>'
        . '<form action="' . $param . 'Delete.php"  method="post">';
        $n = "nom_" . $param;
        $nom = $resultat->$n;
        echo '<td>' . $nom . '</td>'
        . '<input id="' . $param . 'delete" type="hidden" name="delete" value="'.$nom.'"    />'
        . '<td><input type="button"  onclick="remove();" value="Supprimer" /></td>'
        . '</form>'
        . '</tr>';
    }

    echo '</table>';
}

我想在每次点击按钮时删除表格中的整个tr＆＃34; Supprimer＆＃34;。

function remove(){
    $().live('click',function(){
        var whichtr = $(this).parent().parent();
        whichtr.remove(); 
    });
}

我在做错了什么？我使用$(this).parent().parent();从button转到td，从td转到tr，然后尝试删除它，但该功能只删除按钮。

我也尝试了这一点，但没有取得更多成功：

function remove(){
    $().live('click',function(){
        var whichtr = $(this).closest("tr");
        whichtr.remove(); 
    });
}

Answer 1

由于内联javascript事件处理程序被认为是不好的做法，我删除了它们并在javascript本身中创建了一个单击事件处理程序。

假设此示例为html：

<table>
    <tr>
        <form>
        <td></td>
        <input type="hidden" />
        <td>
        <input type="button"  class="remove" value="Supprimer" />            
        </td>
        </form>
    </tr>    
    <tr>
        <form>
        <td></td>
        <input type="hidden" />
        <td>
        <input type="button"  class="remove" value="Supprimer" />            
        </td>
        </form>
    </tr>
</table>

以下js将起作用：

$('table').on('click', '.remove', function() {
    $(this).closest('tr').remove();
});

Working Example

Answer 2

只要将此事件直接用于按钮的onclick方法，就不必创建处理程序来绑定“supprimer”上的click事件

所以你可以这样写：

function remove(){
   var whichtr = $(this).closest("tr");
   whichtr.remove(); 
}

（未经测试）

我希望它可以提供帮助

Answer 3

尝试以下

<input type="button"  onclick="remove(this);" value="Supprimer" />

删除方法如下： -

function remove(e){
      $(e).closest('tr').remove();
}

Answer 4

复制自问题：

如果我直接在生成的表单中包含js代码，则可以工作：

function queryComposant($param) {
    $query = "SELECT nom_" . $param . " FROM " . $param . ";";
    $result = connectdb()->query($query)or die("Err " . $query);
    $resultat = $result->fetch(PDO::FETCH_OBJ);
    echo '<table border = "1" id="table' . $param . '">';

    foreach ($resultat as $value) {
    }

    while ($resultat = $result->fetch(PDO::FETCH_OBJ)) {

        echo '<tr>'
        . '<form action="' . $param . 'Delete.php"  method="post">';
        $n = "nom_" . $param;
        $nom = $resultat->$n;
        echo '<td>' . $nom . '</td>'
        . '<input id="' . $param . 'delete" type="hidden" name="delete"       value="'.$nom.'"     />'
        . '<td>'
        . '<input type="button" onclick="$(\'table\').on(\'click\', \'.remove\', function() {'
        . '$(this).closest(\'tr\').remove();});" class="remove" value="Supprimer" />'
        . '</td>'
        . '</form>'
        . '</tr>';
    }
    echo '</table>';
}

删除生成的字段javascript

4 个答案: