Question

我有一个HTML var checkb = document.getElementById("checkbox1"); (function() { checkbFunc(checkb); function checkbFunc(checkb) { console.log(checkb); checkb.addEventListener("click", function(e) { if( checkb.checked ) { alert("i am checked"); } else { alert("i am not checked") } }); } }() // Add these round braces );，其中最后一列是Table的列。我想要这样，每当我检查checkboxes时，表格旁边会弹出一个编辑按钮，允许我编辑该行。

现在，在加载时，编辑按钮已经存在，当选中复选框时，它什么都不做。

我该如何解决这个问题？

HTML / PHP代码：

checkbox

相对Javascript：

<html>
    <head>
        <title>Stage Rebate Master HTML Table</title>
        <link rel="stylesheet" type="text/css" href="html_master.css">
        <script type="text/javascript" src=jquery-1.8.3.js></script>
        <script src="html_master.js"></script>
    </head>
<body>

<table id="html_master">
<thead>
    <tr>
    <td>MR_ID</td>
    <td>MR_Name</td>
    <td>Buyer_ID</td>
    <td>MR_POC_N</td>
    <td>MR_POC_E</td>
    <td>MR_POC_P</td>
    <td>Select</td>
    </tr>
</thead>
<tbody>

<?php
    foreach ($dbh->query($sql) as $rows){
    ?>
    <tr>
        <td id="mr_id"><?php echo intval ($rows['MR_ID'])?></td>
        <td id="mr_name"><?php echo $rows['MR_Name']?></td>
        <td id="buyer_id"><?php echo $rows['Buyer_ID']?></td>
        <td id="poc_n"><?php echo $rows['MR_POC_N']?></td>     
        <td id="poc_e"><?php echo $rows['MR_POC_E']?></td>
        <td id="poc_p"><?php echo $rows['MR_POC_P']?></td>
        <td align="center"><input type="checkbox" name="check" value="checked"></td>
        </tr>
 <?php
  }
 ?>
</tbody>
        <input type="button" class="add" value="Add Row" onclick="addRow('html_master')">  
        <input type="button" id="edit" value="Edit" name="edit">
        <input type="button" id="delRow" value="Delete" onclick="deleteRow('html_master')">
</table>

</body>
</html>

数据库代码：

     // ----- Delete Row -----

function deleteRow(html_master){
    var tbl=document.getElementById(html_master);
    var col=tbl.querySelectorAll('input[type=\"checkbox\"]:checked');
    if( col ){
        for( var n in col )if( col[ n ].nodeType==1 ){
            try {
                var tr=col[ n ].parentNode.parentNode;
                var tbody=tr.parentNode;
                tbody.removeChild( tr );
            }catch( err ){
                console.warn(err);
                continue;
            }
        }
    }
}

// ----- Add Row -----

function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    cell1.innerHTML = rowCount;

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "txtbox[]";
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "txtbox[]";
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "txtbox[]";
    cell4.appendChild(element4);

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "txtbox[]";
    cell5.appendChild(element5);

    var cell6 = row.insertCell(5);
    var element6 = document.createElement("input");
    element6.type = "text";
    element6.name = "txtbox[]";
    cell6.appendChild(element6);

    var cell7 = row.insertCell(6);
    var element7 = document.createElement("input");
    element7.type = "checkbox";
    element7.name="chkbox[]";
    cell7.appendChild(element7);

}

$(document).ready(function() {
  var $submit = $("#edit").hide(),
    $cbs = $('input[name="check"]').click(function() {
      $submit.toggle($cbs.is(":checked"));
    });
});

CSS代码：

<?php
$host="xxxxxx"; 
$dbName="xxxxxxx"; 
$dbUser="xxxxx"; 
$dbPass="xxxxxxxxxxxx";

$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass); 
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION ); 
$sql = "SELECT * FROM Stage_Rebate_Master ORDER BY MR_ID ASC"; 
?>

Answer 1

您的代码应该可以使用，但这可能更容易理解

$(function() {
   var $edit = $("#edit"); 
   $edit.hide() // or use CSS
   $('input[name="check"]').click(function() {
    $edit.toggle($this).is(":checked") );
   });
 });

但是，如果取消选中其中一个复选框而不管其他复选框

，它将再次隐藏该按钮

也许你的意思是

$('input[name="check"]').click(function() {
  $edit.toggle($('input[name="check"]:checked').length>0);
});

Answer 2

想出我的问题......我根本没有让我的jquery源正确...我把它改成了......

src="http://code.jquery.com/jquery-git.js"

现在它运作得很好！

选中复选框时显示编辑按钮

2 个答案: