我有一个Html表。我想要做的是不使用database.Perform crud操作。我能够将数据添加到html表并删除数据。但是我无法更新当我点击html表上的编辑按钮获取数据时。如何将该数据分配到文本框中并根据索引进行更新。有任何方法可以执行此操作。请任何人帮助。谢谢提前。
#!/bin/bash
args=("${@}")
filter="--argname"
for ((i=0; i<"${#args[@]}"; ++i)); do
case ${args[i]} in
"$filter") unset args[i]; unset args[i+1]; break ;;
esac
done
./bar.sh "${args[@]}"
$(function() {
$('.plusdiv #adddata').on('click', function() {
var orgname, from, todate, capacity, orgid;
orgid = $("#orgid").val();
orgname = $("#orgname").val();
from = $("#fromdt").val();
todate = $("#todt").val();
capacity = $("#cpcty").val();
var edit = "<a class='editedu' href='#'><i class='fa fa-edit fa-2x'></i></a>";
var del = "<a class='deleteedu' href='#'><i class='fa fa-remove fa-2x'></i></a>";
if (orgname == "" || from == "" || todate == "") {
alert("Fields should not be empty");
} else {
var table = "<tr><td>" + orgname + "</td><td>" + from + "</td><td>" + todate + "</td><td>" + capacity + "</td><td>" + edit + "</td><td>" + del + "</td></tr>";
$("#tableexp").append(table);
}
orgid = $("#orgid").val("");
orgname = $("#orgname").val("");
from = $("#fromdt").val("");
todate = $("#todt").val("");
capacity = $("#cpcty").val("");
});
});
$(function() {
$("#tableexp").on("click", ".deleteedu", function(e) {
if (confirm("Are you sure want to delete")) {
$(this).closest('tr').remove();
} else {
e.preventDefault();
}
});
});
$(function() {
$('.crossdiv #cleardata').on('click', function() {
$("#orgid").val("");
$("#orgname").val("");
$("#fromdt").val("");
$("#todt").val("");
$("#cpcty").val("");
});
});
$(function() {
var row, td;
$("#tableexp").on("click", ".editedu", function(e) {
row = $(this).closest('tr');
td = row.find("td");
$.each(td, function() {
//i am getting the td data how to assign data to textboxes and do update
console.log($(this).html());
});
});
});CSS code For Table
---------------------------
#tableexp th,td{
text-align:center;
font-size:17px;
border-collapse: collapse;
}
#tableexp{
box-sizing:border-box;
}
#tableexp th{
font-size: 17px;
border-bottom:1px solid black;
border-right:1px solid black;
}
#tableexp tr:nth-child(odd){
background-color: #dddddd;
}
HTML Code
-----------------------------
答案 0 :(得分：0)
您可以使用html（）方法直接指定它们......
$(function() {
$('.plusdiv #adddata').on('click', function() {
var orgname, from, todate, capacity, orgid;
orgid = $("#orgid").val();
orgname = $("#orgname").val();
from = $("#fromdt").val();
todate = $("#todt").val();
capacity = $("#cpcty").val();
var edit = "<a class='editedu' href='#'><i class='fa fa-edit fa-2x'></i></a>";
var del = "<a class='deleteedu' href='#'><i class='fa fa-remove fa-2x'></i></a>";
if (orgname == "" || from == "" || todate == "") {
alert("Fields should not be empty");
} else {
var table = "<tr><td>" + orgname + "</td><td>" + from + "</td><td>" + todate + "</td><td>" + capacity + "</td><td>" + edit + "</td><td>" + del + "</td></tr>";
$("#tableexp").append(table);
}
orgid = $("#orgid").val("");
orgname = $("#orgname").val("");
from = $("#fromdt").val("");
todate = $("#todt").val("");
capacity = $("#cpcty").val("");
});
});
$(function() {
$("#tableexp").on("click", ".deleteedu", function(e) {
if (confirm("Are you sure want to delete")) {
$(this).closest('tr').remove();
} else {
e.preventDefault();
}
});
});
$(function() {
$('.crossdiv #cleardata').on('click', function() {
$("#orgid").val("");
$("#orgname").val("");
$("#fromdt").val("");
$("#todt").val("");
$("#cpcty").val("");
});
});
$(function() {
var row, td;
$("#tableexp").on("click", ".editedu", function(e) {
row = $(this).closest('tr');
td = row.find("td");
$('#orgname').val($(td[0]).html());
$('#fromdt').val($(td[1]).html());
$('#todt').val($(td[2]).html());
$('#cpcty').val($(td[3]).html());
//$.each(td, function() {
//i am getting the td data how to assign data to textboxes and do update
// console.log($(this).html());
// $('#orgname')
//});
});
});CSS code For Table
---------------------------
#tableexp th,td{
text-align:center;
font-size:17px;
border-collapse: collapse;
}
#tableexp{
box-sizing:border-box;
}
#tableexp th{
font-size: 17px;
border-bottom:1px solid black;
border-right:1px solid black;
}
#tableexp tr:nth-child(odd){
background-color: #dddddd;
}
HTML Code
-----------------------------<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div id="a8" style="float:left;width:100%;margin:5px 0px 10px 10px;text-align:left;font-size:17px;">
<div class="yopdiv" style="float:left;width:10.5%;font-size:16px;margin-top:3px;font-family:arial;">
<label>Organisation</label>
</div>
<div class="org" style="float:left;width:24%;">
<input style="display:none;" id="orgid" type="text" name="orgid" value="1" />
<input type="text" name="organisation" id="orgname" style="width:95%;height:20px;font-size:17px;" value="" required/>
</div>
<div class="formlbl" style="float:left;width:5.5%;font-size:16px;margin-top:3px;font-family:arial;">
<label>From </label>
</div>
<div class="formtxt" style="float:left;width:10%;">
<input type="text" id="fromdt" name="fromdate" maxlength="10" style="width:95%;height:20px;font-size:15px;" value="" />
</div>
<div class="tolbl" style="float:left;width:4%;font-size:16px;margin:3px 0px 0 15px;font-family:arial;">
<label>To</label>
</div>
<div class="totxt" style="float:left;width:10%;font-size:18px;">
<input type="text" name="todate" id="todt" value="" style="width:90%;height:20px;font-size:17px;" />
</div>
<div class="cpctylbl" style="float:left;width:6%;font-size:16px;margin:3px 0px 0 15px;font-family:arial;">
<label>Capacity</label>
</div>
<div class="cptxt" style="float:left;width:16%;font-size:18px;">
<input type="text" name="capacity" id="cpcty" value="" style="width:97%;height:20px;font-size:17px;" />
</div>
<div class="plusdiv" style="float:left;width:3%;margin-left:-2px;padding-left:20px;">
<a id='adddata' href="#"><i class="fa fa-plus" style="width:70%;font-size:25px;color:white;background-color:#dc143c;padding-left:2px;"></i></a>
</div>
<div class="crossdiv" style="float:left;width:5%;padding-left:10px;">
<a id='cleardata' href="#"><i class="fa fa-remove" style="width:50%;font-size:25px;color:white;background-color:#dc143c;padding-left:4px;"></i></a>
</div>
</div>
<div id="exptable" class="expdiv" style="max-height:140px;overflow: auto; width:100%;">
<table cellspacing="0" style="width:100%;" cellpadding="0" id=tableexp>
<thead>
<tr>
<th style="width:25%;">Organisation</th>
<th style="width:20%;">From</th>
<th style="width:13%;">To</th>
<th style="width:20%;">Capacity</th>
<th style="width:5%;">Edit</th>
<th style="width:5%;">Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>