jQuery CRUD Table Modification

jQuery CRUD Table Modification

Greetings from Retirement-land!

Once again, I call upon those with greater expertise in jQuery/AJAX/Javascript for enlightenment. I'm learning, but "the road is long, with many a winding turn".

I have a jQuery CRUD table that I found online that our disc golf indoor putting league is using to keep track of weekly scores. Here's a screenshot:


The [Add Player] button adds a row at the bottom with all "text" input fields at the bottom.  Editing is click the cell and modify.

Everything works flawlessly.

What I'd like to do is change Column 2 (League) from the standard "text" input to a "select" input that pulls its data from a very simple leagues table in the database. I'll create an admin interface for it later.

Pared down code is below. Full code is shown here:

Complete source if anyone wants to play with it:

It's the management panel of a little web app I'm working on to compute team handicaps.

Thanks in advance for any and all revelations. I've Googled and Binged to no avail.

-MD

index.php
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();

$sql = "SELECT * from pleague";   // table containing player data (id, player, league, week1, week2, etc.)
$row_product = $db_handle->runSelectQuery($sql);

$sql2 = "SELECT * from leagues";  // table containing leagues (id, name)
$row2 = $db_handle->runSelectQuery($sql2);

?>
<html>
<head>
<title>Putting League Inline Manager</title>
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<script>
function createNew() {
$("#add-more").hide();
var data = '<tr class="table-row" id="new_row_ajax">' +
'<td contenteditable="true" id="txt_player" onBlur="addToHiddenField(this,\'player\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_league" onBlur="addToHiddenField(this,\'league\')" onClick="editRow(this);"></td>' +
'<td contenteditable="true" id="txt_week1" onBlur="addToHiddenField(this,\'week1\')" onClick="editRow(this);"></td>' +
'<td><input type="hidden" id="player" /><input type="hidden" id="league" /><input type="hidden" id="week1" /><span id="confirmAdd"><a onClick="addToDatabase()" class="ajax-action-links">Save</a> / <a onclick="cancelAdd();" class="ajax-action-links">Cancel</a></span></td>' +
'</tr>';
  $("#table-body").append(data);
}

function cancelAdd() {
$("#add-more").show();
$("#new_row_ajax").remove();
}

function editRow(editableObj) {
  $(editableObj).css("background","#FFF");
}

function saveToDatabase(editableObj,column,id) {
  $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
  $.ajax({
    url: "edit.php",
    type: "POST",
    data:'column='+column+'&editval='+$(editableObj).text()+'&id='+id,
    success: function(data){
      $(editableObj).css("background","#FDFDFD");
    }
  });
}

function addToDatabase() {
  var player = $("#player").val();
  var league = $("#league").val();
  var week1 = $("#week1").val();
  
  $("#confirmAdd").html('<img src="loaderIcon.gif" />');
  $.ajax({
url: "add.php",
type: "POST",
data:'player='+player+'&league='+league+'&week1='+week1,
success: function(data){
  $("#new_row_ajax").remove();
  $("#add-more").show();   
  $("#table-body").append(data);
}
  });
}

function addToHiddenField(addColumn,hiddenField) {
var columnValue = $(addColumn).text();
$("#"+hiddenField).val(columnValue);
}

function deleteRecord(id) {
if(confirm("Are you sure you want to delete this row?")) {
$.ajax({
url: "delete.php",
type: "POST",
data:'id='+id,
success: function(data){
  $("#table-row-"+id).remove();
}
});
}
}

</script>
</head>
<body>
<div>
<h2>Putting League Inline Manager</h2>
<table class="tbl-qa" border="1">
  <thead>
<tr>
  <th class="table-header">Player</th>
  <th class="table-header">League</th>
  <th class="table-header">WK1</th>
  . . .
  <th class="table-header">ACTION</th>
</tr>
  </thead>
  <tbody id="table-body">
<?php
if(!empty($row_product)) { 
foreach($row_product as $k=>$v) {
  ?>
  <tr class="table-row" id="table-row-<?php echo $row_product[$k]["id"]; ?>">
<td contenteditable="true" onBlur="saveToDatabase(this,'player','<?php echo $row_product[$k]["id"]; ?>')" onClick="editRow(this);"><b><?php echo $row_product[$k]["player"]; ?></b></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'league','<?php echo $row_product[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $row_product[$k]["league"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'week1','<?php echo $row_product[$k]["id"]; ?>')" onClick="editRow(this);"><?php echo $row_product[$k]["week1"]; ?></td>
        . . .
<td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $row_product[$k]["id"]; ?>);">Delete</a></td>
  </tr>
  <?php
  }
}
?>
</tbody>
</table>
<div class="add-data-style" id="add-more" onClick="createNew();">ADD PLAYER</div>
</div>
</body>
</html>

add.php

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();

if(!empty($_POST["player"])) {
$player = mysql_real_escape_string(strip_tags($_POST["player"]));
$league = mysql_real_escape_string(strip_tags($_POST["league"]));
$week1 = mysql_real_escape_string(strip_tags($_POST["week1"]));

  $sql = "INSERT INTO pleague (player,league,week1) VALUES ('" . $player . "','" . $league . "','" . $week1 . "')";
  $faq_id = $db_handle->executeInsert($sql);
if(!empty($faq_id)) {
$sql = "SELECT * from pleague WHERE id = '$faq_id' ";
$posts = $db_handle->runSelectQuery($sql);
}
?>
<tr class="table-row" id="table-row-<?php echo $posts[0]["id"]; ?>">
<td contenteditable="true" onBlur="saveToDatabase(this,'player','<?php echo $posts[0]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[0]["player"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'league','<?php echo $posts[0]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[0]["league"]; ?></td>
<td contenteditable="true" onBlur="saveToDatabase(this,'week1','<?php echo $posts[0]["id"]; ?>')" onClick="editRow(this);"><?php echo $posts[0]["week1"]; ?></td>
<td><a class="ajax-action-links" onclick="deleteRecord(<?php echo $posts[0]["id"]; ?>);">Delete</a></td>
</tr>  
<?php } ?>

edit.php

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$result = mysql_query("UPDATE pleague set " . $_POST["column"] . " = '".$_POST["editval"]."' WHERE  id=".$_POST["id"]);
?>