We Keep Coding

No popup window appear with paginated table

I have paginated table and input field. I want to allow user to create new process. Created table allow user to view already existed processes.
hmtl code:
<div class="inner">
<center><table class="paginated">
<?php
$result = getProcessData();
if (mysqli_num_rows($result) > 0)
{
echo '
<thead>
<tr>
<th>Process</th>
<th>Created By</th>
</tr>
</thead>';
}
$count = 0;
if (mysqli_num_rows($result) > 0)
while($row = mysqli_fetch_array($result))
{
$process = $row['theme_name'];
$createdBy = $row['createby'];
echo '
<tbody>
<tr valign="top">
<td>' .$process. '</td>
<td>' .$createdBy. '</td>
</tr>
</tbody>';
$count++;
}
?>
</table></center>
<form id="reguserform" method="post" action="process.php#err" style="margin-top:40px;">
<?php
$res = verifyFormFields();
?>
<!-- Username field -->
<input type="text" class="input name" placeholder="Process name (required)" name="process" required/>
<!--<label class="tooll tool1">- No special Characters except _<br>- Character Limit: 4 to 20<br>- Username must be Unique</label>-->
<center><input type="submit" class="button small" name="submit" value="Create Process"/></center>
<div id="registerModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
<h2 id="modalTitle">Success!</h2>
<div>
<div id="testRegister" style="font-weight: 400;font-size: 1.5em; font-family: 'Raleway', Arial, sans-serif;"></div>
<div class="right">
Ok
</div>
</div>
</div>
<?php
if($count == 1)
{
if($res=="")
{
registerProcess();
echo"<script>document.getElementById('testRegister').innerHTML=registerStr;callShowAlert();</script>";
}
else{
echo "
<a style='color:red';>
$res
</a>
";
}
}
?>
</form>
</div>
I validate the field and the inserting process into database:
function registerProcess(){
$con = mysqli_connect(DATABASE_HOST, DATABASE_USER, DATABASE_PASSWORD, DATABASE_NAME);
global $process;
// To protect MySQL injection (more detail about MySQL injection)
$process = cleanInputData($process);
$process = mysqli_real_escape_string($con, $process);
//query result
$result = insertNewProcess(NULL,$process,$_SESSION['login_user'],1);
// Check result
if (!$result) {
$msg2= "Process is already added. You cannot add same process twice!";
echo $msg2;
die('Invalid queryyyy: ' . mysqli_error($con));
}
// the message
$msg = "Process is added!";
// use wordwrap() if lines are longer than 70 characters
echo "<script>var registerStr = 'Process Is Added';</script>";
//echo "<meta http-equiv='refresh' content='0'>";
}
function verifyFormFields(){
global $process;
if(empty($process)){
return "<p id ='err'>Please Input Process</p>";
}
else return "";
}
Also I use javascript to call pop up window and make table paginated:
<script type="text/javascript">
(function() {
$(document).foundation();
});
function callShowAlert()
{
$('#registerModal').foundation('reveal', 'open');
}
function popUpNo()
{
$('#registerModal').foundation('reveal', 'close');
location.href = 'process.php';
}
var testVal = 0;
</script>
<script>
$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 5;
var $table = $(this);
$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
});
$table.trigger('repaginate');
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pager"></div>');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1).bind('click', {
newPage: page
}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table).find('span.page-number:first').addClass('active');
});
} );
</script>
it works perfect, I got popup window and system inserts record to database but only if there is only input field and submit button. When I put table it doesnt work. System does not reload and not insert record into database. Why?

So I solved this problem by simply putting table after form:
<div class="inner">
<form id="reguserform" method="post" action="process.php#err" style="margin-top:40px;">
<?php
$res = verifyFormFields();
?>
<!-- Username field -->
<input type="text" class="input name" placeholder="Process name (required)" name="process" required/>
<!--<label class="tooll tool1">- No special Characters except _<br>- Character Limit: 4 to 20<br>- Username must be Unique</label>-->
<center><input type="submit" class="button small" name="submit" value="Create Process"/></center>
<div id="registerModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-options="close_on_background_click:false">
<h2 id="modalTitle">Success!</h2>
<div>
<div id="testRegister" style="font-weight: 400;font-size: 1.5em; font-family: 'Raleway', Arial, sans-serif;"></div>
<div class="right">
Ok
</div>
</div>
</div>
<?php
if($count == 1)
{
if($res=="")
{
registerProcess();
echo"<script>document.getElementById('testRegister').innerHTML=registerStr;callShowAlert();</script>";
}
else{
echo "
<a style='color:red';>
$res
</a>
";
}
}
?>
</form>
<center><table class="paginated">
<?php
$result = getProcessData();
if (mysqli_num_rows($result) > 0)
{
echo '
<thead>
<tr>
<th>Process</th>
<th>Created By</th>
</tr>
</thead>';
}
$count = 0;
if (mysqli_num_rows($result) > 0)
while($row = mysqli_fetch_array($result))
{
$process = $row['theme_name'];
$createdBy = $row['createby'];
echo '
<tbody>
<tr valign="top">
<td>' .$process. '</td>
<td>' .$createdBy. '</td>
</tr>
</tbody>';
$count++;
}
?>
</table></center>
</div>
So as I got it, table cannot be updated before from.

How do I run onchange event when rows can be added at any time

I want to do what I did in the snippet but as an array. What do I mean by this. Lets say a user wants to add another row to the example in the snippet. The code should run both and calculate the total from both rows. There can be new rows added that is why im saying im trying to do this as an array. I'm trying to do something like excel does with cells that add the data depending on the change of a cell but in a much simpler manner just addition and only specified cells.
How would I do this?
this is the code that I have that I want to add this functionality to:
index.php
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
/* this function would also add the prices to the table*/
var first_name = $('#first_name').text();
var last_name = $('#last_name').text();
if(first_name == '')
{
alert("Enter First Name");
return false;
}
if(last_name == '')
{
alert("Enter Last Name");
return false;
}
$.ajax({
url:"insert.php",
method:"POST",
data:{first_name:first_name, last_name:last_name},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
});
</script>
select.php
<?php
$connect = mysqli_connect("localhost", "root", "", "test_db");
$output = '';
$sql = "SELECT * FROM tbl_sample ORDER BY id DESC";
$result = mysqli_query($connect, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">Id</th>
<th width="40%">First Name</th>
<th width="40%">Last Name</th>
<th width="10%">Delete</th>
</tr>';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="first_name" data-id1="'.$row["id"].'" contenteditable>'.$row["first_name"].'</td>
<td class="last_name" data-id2="'.$row["id"].'" contenteditable>'.$row["last_name"].'</td>
<td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="first_name" contenteditable></td>
<td id="last_name" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else
{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
$(document).ready(function() {
// functions assigned to onchange properties
document.getElementById('price').onchange = function() {
// access form and value properties via this (keyword)
var form = this.form;
var total = parseFloat(this.value) + parseFloat(form.elements['aditional_price'].value);
form.elements['total'].value = formatDecimal(total);
};
document.getElementById('aditional_price').onchange = function() {
// access form and value properties via this (keyword)
var form = this.form;
var total = parseFloat(this.value) + parseFloat(form.elements['price'].value);
form.elements['total'].value = formatDecimal(total);
};
// format val to n number of decimal places
function formatDecimal(val, n) {
n = n || 2;
var str = "" + Math.round(parseFloat(val) * Math.pow(10, n));
while (str.length <= n) {
str = "0" + str;
}
var pt = str.length - n;
return str.slice(0, pt) + "." + str.slice(pt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="form1" class="form1" name="form1">
<fieldset>
<p>
Price
<input name="price" id="price" size="4" value="0" />+ Aditional Price
<input name="aditional_price" id="aditional_price" value="0" size="4" />
<br/>
<!-- new row added
<br/>
Price
<input name="price" id="price" size="4" value="0" />+ Aditional Price
<input name="aditional_price" id="aditional_price" value="0" size="4"/>
<br/>
-->
<br/>
<label>Total: $
<input type="text" class="num" name="total" value="0.00" readonly="readonly" />
</label>
</p>
</fieldset>
</form>

auto sum and append data javascript

Now there is an input from add more button, the user writes some number and than he gets the sum, I am trying to get the sum automatically. its didnt work but I need the output print in text box.... for this code
here my javascript :
var i = $('table tr').length;
var count = $('table tr').length;
var row = i;
var a = 0;
for (a = 0; a <= i; a++) {
$(".addmore_" + a).on('click', function (a) {
return function() {
var box = $("#box_"+ a);
box.val( Number(box.val())+1 );
var data = "<td><input class='form-control sedang' type='text' id='packinglist_" + a + "' name='packinglist"+ a +"[]'/></td>";
$("#keatas_" + a).append(data);
};
}
(a));
//this calculates values automatically
calculateSum();
$("#packinglist_"+a).on("keydown keyup", function() {
calculateSum();
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$("#packinglist_"+ a).each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
$(this).css("background-color", "#FEFFB0");
}
else if (this.value.length != 0){
$(this).css("background-color", "red");
}
});
$("input#netto_"+ a).val(sum.toFixed(2));
}
}
here my html :
if($_GET['mod'] == 'Buat Surat Jalan Keluar'){
function romanNumerals($num)
{
$n = intval($num);
$res = '';
/*** roman_numerals array ***/
$roman_numerals = array(
'M' => 1000,
'CM' => 900,
'D' => 500,
'CD' => 400,
'C' => 100,
'XC' => 90,
'L' => 50,
'XL' => 40,
'X' => 10,
'IX' => 9,
'V' => 5,
'IV' => 4,
'I' => 1);
foreach ($roman_numerals as $roman => $number)
{
/*** divide to get matches ***/
$matches = intval($n / $number);
/*** assign the roman char * $matches ***/
$res .= str_repeat($roman, $matches);
/*** substract from the number ***/
$n = $n % $number;
}
/*** return the res ***/
return $res;
}
echo"</div>";
echo"
<link rel='stylesheet' type='text/css' href='css/jquery-ui.min.css' />
<link rel='stylesheet' type='text/css' href='css/main.css' />
";
$month = date('n');
$b=romanNumerals($month);
$years=date('Y');
echo"<div class='form-group'>";
$tanggal=date('d');
$s=mysql_query("SELECT * FROM surat_jalan WHERE identitas_surat = 1 AND bulantahun=$_POST[bulantahun] ORDER BY no_surat_jalan ASC");
while($a=mysql_fetch_array($s)){
$nomor = $a[2];
$potong = (int)substr($nomor,0,3);
$potong++;
}
$kosong= mysql_num_rows($s);
if(count($kosong) == 0){
$nomore = sprintf('%03s',1);
}
else {
$nomore = sprintf('%03s',$potong);
}
echo"
<body>
<form id='students' method='post' name='students' action='../Action/tambah.php?mod=suratkeluar&batas=$_POST[jumlahdata]' autocomplete='off'>
<div class='row '>
<div class='col-lg-4 '>
<div class='panel panel-default noborder'>
<div class='panel-body '>
<h3>No : ".$nomore."/$b/$years</h3>
<input class='form-control' type='hidden' id='nosurat' name='nosurat' value='".$nomore."/$b/$years' />
</div>
</div>
</div>
<div class='col-lg-4 text-center'>
<div class='panel panel-default'>
<div class='panel-body'>
<label>Customer</label><select name='customer' class= 'form-control '>
";
$s=mysql_query('SELECT * FROM customer ORDER BY nama_customer ASC');
while($ben=mysql_fetch_array($s)){
echo"<option value='$ben[id_customer]_$ben[nama_customer]_$ben[alamat_customer]'>$ben[nama_customer]</option>";
}
echo" </select>
</div>
</div>
</div>
<div class='col-lg-4 text-center'>
<div class='panel panel-default'>
<div class='panel-body'>
<label>Nomor PO</label><select name='nopo' class= 'form-control '>
<option value='0_-'> - </option>
";
$s=mysql_query('SELECT * FROM preorder WHERE pabrik = 0 and nonview = 0 GROUP BY no_po ORDER BY no_po ASC');
while($ben=mysql_fetch_array($s)){
echo"<option value='$ben[id_po]_$ben[no_po]'>$ben[no_po]</option>";
}
echo" </select>
</div>
</div>
</div>
<div class='table-responsive'>
<table class='table table-bordered'>
<tr>
<th>No</th>
<th>Jenis Benang</th>
<th>Warna</th>
<th>Lot</th>
<th>Netto</th>
<th>Box</th>
<th>Cones</th>
<th>Keterangan</th>
</tr>";
$s=mysql_query("SELECT * FROM surat_jalan order by id_surat DESC");
$a=mysql_fetch_array($s);
for($i=1;$i<=$_POST['jumlahdata'];$i++)
{
$nomor = $a[0];
$iden = $nomor + $i;
echo" <tr>
<td><span id='snum'>$i.</span></td>
<input class='form-control' type='hidden' id='hiddenlot_$i' name='hiddenlot[]' />
<input class='form-control' type='hidden' id='hiddencustomer_$i' name='hiddencustomer[]' />
<input class='form-control' type='hidden' id='hiddenprice_$i' name='hiddenprice[]' />
<td><input class='form-control' type='text' id='jenisbenang_$i' name='jenisbenang[]' readonly/></td>
<td><input class='form-control' type='text' id='warna_$i' name='warna[]' readonly/></td>
<td><input class='form-control' type='text' id='lot_$i' name='lot[]' required/></td>
<td><input class='form-control sedang' type='text' id='netto_$i' name='netto[]' required/> </td>
<td><input class='form-control pendek' type='text' id='box_$i' name='box[]' /> </td>
<td><input class='form-control pendek' type='text' id='cones_$i' name='cones[]'/> </td>
<td><input class='form-control' type='text' id='keterangan_$i' name='keterangan[]'/>
<input class='form-control' type='hidden' id='keterangan_$i' name='identitas[]' value='$iden'/>
</td>
</tr>
<tr>
<td><a><span class='glyphicon glyphicon-plus addmore_$i' id='$i'></span></a><br>
<a><span class='glyphicon glyphicon-minus delete_$i'></a> </td>
<td colspan='10'>
<table id='keatas_$i' class='keatas'>
<tr>
</tr>
</table>
</tr>
</td>";
}
echo"
</table>
<div class='form-group'>
<button type='submit' class='btn btn-primary btn-lg btn-block' name='submit'>Tambah Data</button>
</div>
</div>
</form>
</body>
</div>
</div>
</div>
</div><!-- /container -->
}
so my code didnt work on it , but anything else working properly
any response would be appreciated

I have check your code. i have made some changes in your code. You have to use , in your jQuery code. Here is change "keydown, keyup" .
Also change in $('body').on('click', ".addmore_" + a, function (a) { in your for loop. and $('body').on("keydown, keyup", "#packinglist_"+a, function() {
This is because you are creating dynamic input
Please check this , it should work :
var i = $('table tr').length;
var count = $('table tr').length;
var row = i;
var a = 0;
for (a = 0; a <= i; a++) {
$(".addmore_" + a).on('click', function (a) {
return function() {
var box = $("#box_"+ a);
box.val( Number(box.val())+1 );
var data = "<td><input class='form-control sedang' type='text' id='packinglist_" + a + "' name='packinglist"+ a +"[]'/></td>";
$("#keatas_" + a).append(data);
};
}
(a));
//this calculates values automatically
calculateSum();
$("#packinglist_"+a).on("keydown keyup", function() {
calculateSum();
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$("#packinglist_"+ a).each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
$(this).css("background-color", "#FEFFB0");
}
else if (this.value.length != 0){
$(this).css("background-color", "red");
}
});
$("input#netto_"+ a).val(sum.toFixed(2));
}
}
HTML code updates :
if($_GET['mod'] == 'Buat Surat Jalan Keluar'){
function romanNumerals($num)
{
$n = intval($num);
$res = '';
/*** roman_numerals array ***/
$roman_numerals = array(
'M' => 1000,
'CM' => 900,
'D' => 500,
'CD' => 400,
'C' => 100,
'XC' => 90,
'L' => 50,
'XL' => 40,
'X' => 10,
'IX' => 9,
'V' => 5,
'IV' => 4,
'I' => 1);
foreach ($roman_numerals as $roman => $number)
{
/*** divide to get matches ***/
$matches = intval($n / $number);
/*** assign the roman char * $matches ***/
$res .= str_repeat($roman, $matches);
/*** substract from the number ***/
$n = $n % $number;
}
/*** return the res ***/
return $res;
}
echo"</div>";
echo"
<link rel='stylesheet' type='text/css' href='css/jquery-ui.min.css' />
<link rel='stylesheet' type='text/css' href='css/main.css' />
";
$month = date('n');
$b=romanNumerals($month);
$years=date('Y');
echo"<div class='form-group'>";
$tanggal=date('d');
$s=mysql_query("SELECT * FROM surat_jalan WHERE identitas_surat = 1 AND bulantahun=$_POST[bulantahun] ORDER BY no_surat_jalan ASC");
while($a=mysql_fetch_array($s)){
$nomor = $a[2];
$potong = (int)substr($nomor,0,3);
$potong++;
}
$kosong= mysql_num_rows($s);
if(count($kosong) == 0){
$nomore = sprintf('%03s',1);
}
else {
$nomore = sprintf('%03s',$potong);
}
echo"
<body>
<form id='students' method='post' name='students' action='../Action/tambah.php?mod=suratkeluar&batas=$_POST[jumlahdata]' autocomplete='off'>
<div class='row '>
<div class='col-lg-4 '>
<div class='panel panel-default noborder'>
<div class='panel-body '>
<h3>No : ".$nomore."/$b/$years</h3>
<input class='form-control' type='hidden' id='nosurat' name='nosurat' value='".$nomore."/$b/$years' />
</div>
</div>
</div>
<div class='col-lg-4 text-center'>
<div class='panel panel-default'>
<div class='panel-body'>
<label>Customer</label><select name='customer' class= 'form-control '>
";
$s=mysql_query('SELECT * FROM customer ORDER BY nama_customer ASC');
while($ben=mysql_fetch_array($s)){
echo"<option value='$ben[id_customer]_$ben[nama_customer]_$ben[alamat_customer]'>$ben[nama_customer]</option>";
}
echo" </select>
</div>
</div>
</div>
<div class='col-lg-4 text-center'>
<div class='panel panel-default'>
<div class='panel-body'>
<label>Nomor PO</label><select name='nopo' class= 'form-control '>
<option value='0_-'> - </option>
";
$s=mysql_query('SELECT * FROM preorder WHERE pabrik = 0 and nonview = 0 GROUP BY no_po ORDER BY no_po ASC');
while($ben=mysql_fetch_array($s)){
echo"<option value='$ben[id_po]_$ben[no_po]'>$ben[no_po]</option>";
}
echo" </select>
</div>
</div>
</div>
<div class='table-responsive'>
<table class='table table-bordered'>
<tr>
<th>No</th>
<th>Jenis Benang</th>
<th>Warna</th>
<th>Lot</th>
<th>Netto</th>
<th>Box</th>
<th>Cones</th>
<th>Keterangan</th>
</tr>";
$s=mysql_query("SELECT * FROM surat_jalan order by id_surat DESC");
$a=mysql_fetch_array($s);
for($i=1;$i<=$_POST['jumlahdata'];$i++)
{
$nomor = $a[0];
$iden = $nomor + $i;
echo" <tr>
<td><span id='snum'>$i.</span></td>
<input class='form-control' type='hidden' id='hiddenlot_$i' name='hiddenlot[]' />
<input class='form-control' type='hidden' id='hiddencustomer_$i' name='hiddencustomer[]' />
<input class='form-control' type='hidden' id='hiddenprice_$i' name='hiddenprice[]' />
<td><input class='form-control' type='text' id='jenisbenang_$i' name='jenisbenang[]' readonly/></td>
<td><input class='form-control' type='text' id='warna_$i' name='warna[]' readonly/></td>
<td><input class='form-control' type='text' id='lot_$i' name='lot[]' required/></td>
<td><input class='form-control sedang' type='text' id='netto_$i' name='netto[]' required/> </td>
<td><input class='form-control pendek' type='text' id='box_$i' name='box[]' /> </td>
<td><input class='form-control pendek' type='text' id='cones_$i' name='cones[]'/> </td>
<td><input class='form-control' type='text' id='keterangan_$i' name='keterangan[]'/>
<input class='form-control' type='hidden' id='keterangan_$i' name='identitas[]' value='$iden'/>
</td>
</tr>
<tr>
<td><a><span class='glyphicon glyphicon-plus addmore_$i' id='$i'></span></a><br>
<a><span class='glyphicon glyphicon-minus delete_$i'></a> </td>
<td colspan='10'>
<table id='keatas_$i' class='keatas'>
<tr>
</tr>
</table>
</tr>
</td>";
}
echo"
</table>
<div class='form-group'>
<button type='submit' class='btn btn-primary btn-lg btn-block' name='submit'>Tambah Data</button>
</div>
</div>
</form>
</body>
</div>
</div>
</div>
</div><!-- /container -->";
}

Delete table row with Javascript

Currently I have a table for information called episodes. The table has fields consisting of title, air date, episode number, and plot. I use javascript to clone the fields and also to delete them. My problem is the delete function deletes only the title, airdate, and episode number; however the plot box remains. The problem from what I can tell is that the plot is wrapped in a different <tr></tr> tag. How do I get the delete function to delete both sets?
Here is the table
<table id="template" style="display: none">
<tr class="line">
<td width="50%">
<label><?php _e('Episode Title'); ?></label>
<p>
<input type="text" name="episode_title[]" id="episode_title[]" value="" class="title regular-text" style="width:100%;" />
</p>
</td>
<td width"10%">
<label><?php _e('Airdate'); ?></label>
<p>
<input type="text" name="episode_airdate[]" id="episode_airdate[]" value="" class="airdate regular-text" style="width:100%" />
</p>
</td>
<td width="10%">
<label><?php _e('Season:'); ?></label>
<p>
<?php
for($i=1; $i<=50; $i++)
$season_nums[]=$i;
echo '<select name="episode_season[]" select id="episode_season[]" class="season regular-text" style="100%">';
echo '<option value="">' . __("Season" ) . '</option>';
foreach($season_nums as $season_num){
$selected = '';
echo '<option value="' . $season_num . '" ' . $selected . '>' . $season_num . '</option>';
}
echo '</select>';
?>
</p>
</td>
<td width="10%">
<label><?php _e('Episode:'); ?></label>
<p>
<input type="text" name="episode_number[]" id="episode_number[]" value="" class="number regular-text" style="width: 100%" />
</p>
</td>
<td width="10%" class="commands">
<a rel="delete" class="button">-</a> <a rel="add" class="button">+</a>
</td>
</tr>
<tr class="line2">
<td width="100%">
<label><?php _e('Plot:'); ?></label>
<textarea name="episode_plot[]" id="episode_plot[]" class="plot regular-text"value="" cols="100%" rows="10" tabindex="4" ><?php echo $_POST['episode_season'] ?></textarea>
</td>
</tr>
Here is the JavaScript
// Delete the "-" button in first row
$('#attachments tr:first-child .commands a[rel="delete"]').remove();
}
function items_add()
{
obj = $('#template tr').clone().appendTo('#attachments');
lines++;
if (arguments.length > 0) {
options = arguments[0];
$('.title', obj).val( options.title );
$('.airdate', obj).val( options.airdate );
$('.season', obj).val( options.season );
$('.number', obj).val( options.number );
$('.plot', obj).val( options.plot );
}
}
$('#attachments').delegate('.commands a', 'click', function()
{
var action = $(this).attr('rel');
var confirm_delete = true;
// Add action
if ('add' == action) {
items_add();
}
// Delete action
if ('delete' == action) {
// La TR en la tabla
var oTr = $(this).parent().parent();
var episode_name = $('.title', oTr).val();
var episode_airdate = $('.airdate', oTr).val();
var episode_season = $('.season', oTr).val();
var episode_number = $('.number', oTr).val();
var episode_plot = $('.plot', oTr).val();
if (episode_name != '' || episode_number != '' || episode_plot != '') {
if ( !confirm('Are you sure you want to delete ' + episode_name + '?') ) {
confirm_delete = false;
}
}
if (confirm_delete) {
oTr.remove();
lines--;
}
}
});
$(document).ready(function()
{
items_init();
});
})(jQuery);
Your help will be greatly appreciated

Change this line
var oTr = $(this).parent().parent();
to
var oTr = $(this).closest("tr");
Then use oTr.remove()

IDEA:
in php generate a random number like
$rand = time() * rand();
echo it on the line rows
<tr class="line" data-row="<?php echo $rand; ?>">
and
<tr class="line2" data-row="<?php echo $rand; ?>">
Using your delete function when someone clicks the link
var oTr = $(this).closest("tr");
var data-row =$(oTr).attr('data-row');
$('tr[data-row=' + data-row + ']').remove();
the idea is have a unique string to identify tr with line and line2 classes

Delete and Update Rows with PHP

I do not have access to my database and cannot use a SQL function so I am trying to figure out a way to delete an array from a list when the user deletes it. Here is my code.
<table id="links" width="350px" border="1">
<tr>
<td></td>
<td><b>Display</b></td>
<td><b>Link *</b></td>
<?php
if ( isset($_POST['links']) ) {
$displays = $_POST['displays'];
$links = $_POST['links'];
$domain = $_POST['domain'];
$options = get_option("autodomain_links") or array();
foreach($links as $i => $link) {
if ( empty($displays[$i]) )
$displays[$i] = "";
if (!empty($links[$i]))
{
$autodomain = array('displays' => $displays[$i], 'links' => $links[$i], 'domain' => $domain);
$options[] = $autodomain;
}
}
//$dump = array();
update_option("autodomain_links", $options);
}
$options = get_option("autodomain_links");
if ($options) {
foreach($options as $i => $option) {
echo '<tr id="id_'.$i.'">';
echo '<td><input type="button" class="delete" value="delete" onclick="deleteRow(links)"/></td>';
echo '<td>' . $option['displays'] . '</td>';
echo '<td>' . $option['links'] . ' ' . $option['domain'] . '</td>';
echo '</tr>';
}
}
?>
This is the delete row javascript I am currently using:
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
This is the code which the table above receives data from... this is the form code:
<form method="post" action="" name="links">
<!-- start -->
Domain: <input type="text" id="set-domain" value=".syr.edu" name="domain"/> <br><br>
<table id="dataTable">
<tr>
<td></td>
<td><b> Display</b></td>
<td><b> Link *</b></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox[]"/></td>
<td><input type="text" name="displays[]"></td>
<td><input type="text" name="links[]"></td>
<td><span class="domain">.syr.edu</span><br></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox[]"/>
<td><input type="text" name="displays[]"></td>
<td><input type="text" name="links[]"></td>
<td><span class="domain">.syr.edu</span><br></td>
</tr>
</table>
<br>
<input type="button" name="addlink" value="+" onclick="addRow('dataTable')"/>
<input type="submit" name="savelink" value="Add New Link" />
</form>
</div>