0
私はTableというHTMLを持っていて、最後の列はcheckboxesの列です。 checkboxを確認するたびに、テーブルの横に編集ボタンが表示され、その行を編集できるようにしたいと考えています。チェックボックスをオンにして表示ボタンを表示
現在、読み込み時に編集ボタンが既に表示されています。チェックボックスをオンにすると、何も行われません。
どうすればこの問題を解決できますか？
HTML/PHPコード：
<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>
相対Javascriptを：
// ----- 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"));
});
});
DBコード：
<?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";
?>
CSSコード：
body {
background-image: url("background.png");
}
table {
border-collapse: collapse;
}
td {
border: 1.5px solid black;
padding: 3px;
}
thead {
font-weight: bold;
}
あなたのコンソールは何を読み取っていますか？さらに、これはdb関連のようです。それが問題の一部ではないことは確かですか？ –
これはDBに関連していますが、チェックボックスと編集ボタンのどちらもデータベースと関係がないので、問題になるとは思わないでしょう。 – Rataiczak24
よろしくお願いします。 –