I am new to jquery and javascript.please help me to resolve this error. When clicking the checkbox(more than 3 times) it append the cells more than one time. Thanks in advance. Please help me. * its appending the cells more than once
function suma()
{
alert("hi");
$('#one').on("click", function(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
});
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
<th> msg4</th>
<th> msg5</th>
<th> msg6</th>
</table>
</body>
</html>
Try this,
function suma() {
$('#one').on("click", function() {
var appendStr = "<td> a </td><td> b</td><td> c</td>";
$('#one input:checked').parent().parent().wrap("<tr></tr>")
.append(appendStr).appendTo("#two");
// add string inside TR and append the a b c then appendTo table.
});
}
Working example
Hope helps,
Well I don't know why you are having your jquery click event inside function.
Replace your function with this :
function suma(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
}
Check if the div(#two) already don't have the table("#one") then add it with find function then check if the table does not have this tr then add it be carful that you add table depending on if which will result in more than one with the same id so depend on class is prefer.
function suma()
{
alert("hi");
$('#one').on("click", function(){
if($("#two").find("#one")==0){
$('#one input:checked').parent().parent().appendTo("#two");
}
if($("#two").find("#one").find("<tr><td> a </td>","<td> b</td>","<td> c</td></tr>") ==0){
$("#two").find("#one").append("<tr><td> a </td>","<td> b</td>","<td> c</td></tr>");
}
});
}
You need to append additional text, then after need to append to #two
Try following code,
function suma()
{
var row = $('#one input:checked').parent().parent().append("<td> a </td><td> b</td><td> c</td>");
row.appendTo("#two");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
<th> msg4</th>
<th> msg5</th>
<th> msg6</th>
</table>
</body>
</html>
I think You are Looking For this.
$('#one').on("click", function(){
$('#one input:checked').parent().parent().appendTo("#two");
$("#two tr").append("<td> a </td>","<td> b</td>","<td> c</td>");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="submit" onclick="suma()"/>
<table id="one" border="1">
<tr>
<td> <input type="checkbox"></td>
<td>1</td>
<td> 2</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 3</td>
<td> 4</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>7</td>
<td> 8</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table id="two" border="1">
<th> msg1</th>
<th> msg2</th>
<th> msg3</th>
</table>
</body>
</html>
Related
I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
I am currently working on a FooTable project where I am trying to create a 'select all' checkbox. I have run in to two issues and I cannot figure out how to proceed;
I can select all items, either ALL items (irrespective of filtering)
or just the items on the page.
I can get all the rows to show up, and select, but It will not filter.
I can apply a filter, and still selects all rows.
What I am looking for is a way to only select the filtered rows checkboxes, even if the rows are on different pages. I figured a cheaky way to accomplish this would be:
increase pageSize to more than the amount of filtered rows
select all checkboxes in shown rows
revert back to OG pageSize
<table class="tg" data-paging="true" data-paging-size="3" data-filtering="true">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Select All:<input type="checkbox" class="check-all"></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>10</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
</tbody>
</table>
jQuery(function($) {
$('.tg').footable();
function changePageSize(qs_table, num_rows_page) {
let newSize = num_rows_page;
FooTable.get(qs_table).pageSize(newSize);
}
function checkedAll(qs_table, qs_checkbox, num_column, checked) {
var ft = FooTable.get(qs_table)
ft.pageSize(11);
FooTable.init(qs_table);
let rows = ft.rows.all;
rows.forEach(function(row) {
row.draw(); //REQUIRED for js rendering row, else selected only chockboxes on the active page
$(qs_checkbox, row.cells[num_column].$el[0]).prop('checked', checked);
});
}
$(document).on("change", ".check-all", function() {
checkedAll(".tg", ".check-one", 2, $(this).prop('checked'));
});
});
Here is my JSFiddle: https://jsfiddle.net/T3DDIE_B3AR/pe2usL5r/
I'm having some list of HTML check box in the table and its related data. In the list if I have selected a check box that will move to the top of the list.
Below is my code it works in <div> but not in the <table>.
jQuery(function($) {
$('.t1 .group-title').each(function() {
$if(this.checked) {
$item.insertBefore($('.t1 .group-title').first())
} else {
$item.appendTo($item.data('group'))
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<thead>
<th></th>
<th>Check</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" id="chk1" name="chk1">
</td>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2">
</td>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk3">
</td>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk4">
</td>
<td>4</td>
<td>Title 4</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5">
</td>
<td>5</td>
<td>Title 5</td>
</tr>
</tbody>
</table>
You should bind the change event to checkbox element. Then based of checked state prepend()/append() parent tr element.
$('#t1 :checkbox').on('change', function() {
var tr = $(this).closest('tr');
var tbody = $('#t1 tbody')
if (this.checked) {
tbody.prepend(tr)
} else {
tbody.append(tr)
}
});
jQuery(function($) {
$('#t1 :checkbox').on('change', function() {
var tr = $(this).closest('tr');
var tbody = $('#t1 tbody')
if (this.checked) {
tbody.prepend(tr)
} else {
tbody.append(tr)
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<thead>
<th></th>
<th>Check</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk1">
</td>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2">
</td>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk3">
</td>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk4">
</td>
<td>4</td>
<td>Title 4</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5">
</td>
<td>5</td>
<td>Title 5</td>
</tr>
</tbody>
</table>
Try this code.
$('table').on('change', '[type=checkbox]', function() {
var $this = $(this);
var row = $this.closest('tr');
if ($this.prop('checked')) { // move to top
row.insertBefore(row.parent().find('tr:first-child'))
.find('label').html('move to bottom');
} else { // move to bottom
row.insertAfter(row.parent().find('tr:last-child'))
.find('label').html('move to top');
}
});
First you have to handle the event on change for the checkboxes, and then if the checkbox is checked you should prepend the tr parent to the tbody of your table.
$("#t1 input:checkbox").on("change",function(){
if(this.checked){
$("#t1 tbody").prepend($(this).parents("tr"))
}else{
$("#t1 tbody").append($(this).parents("tr"))
}
})
Here is a fiddle with your example working
https://jsfiddle.net/kLhxq3Lj/
I'm brand new to jquery and javascript and I'm trying to write a simple app that will, when I press a button, copy a row from one table to another and then delete the row from the first table. I have a DeleteRow function that works just fine, but I can't get my "DraftPlayer" function to copy the row. I've tried quite a few of the solutions I've found on the web, but I can't get the syntax just right. You'll see only the second row in the table has the DraftPlayer button as I work this out.
Here are the code snippets I think are critical:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
<script>
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
</script>
</body>
</html>
Thanks for any suggestions!
You are selecting $('#drafted tbody'); which is not present in DOM at all so you will get nothing. You need to add tbody to your table or you need to change the selector.
<table id="drafted">
<tbody>
<tr>
<th width="36"> Rank </th>
<th width="141"> Player Name </th>
<th width="52">Position </th>
<th width="38">Team </th>
<th width="69"> Bye Week </th>
</tr>
</tbody>
</table>
function DraftPlayer(o) {
var p = $(o).closest('tr');
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow)
p.remove();
}
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.innerHTML;
//alert(cloneRow )
copyTable.append("<tr>"+cloneRow+"</tr>");
p.parentNode.removeChild(p);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted" border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
</body>
</html>
A lot of mistakes in your code. Go through my code ,I edited it, Works Fine
You need to convert the DOM Element to jquery object in order to use the clone() function.
The modified DraftPlayer() function is:
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = $(p).clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
Suggestions:
There are some problem with your HTML also
Modify the table tag.
<table id="your_id" border="1">
<tbody>
-----------
-----------
</tbody>
</table>
I'm working on a project where I'm creating a table of items. It looks like so:
<table>
<tr>
<th>Priority</th>
<th>Item</th>
</tr>
<tr>
<td>1</td>
<td><input type="text"><br></td>
</tr>
<tr>
<td>2</td>
<td><input type="text"></td>
</tr>
<tr>
<td>3</td>
<td><input type="text"></td>
</tr>
<tr>
<td>4</td>
<td><input type="text"></td>
</tr>
<tr>
<td>5</td>
<td><input type="text"></td>
</tr>
</table>
<script type = "text/javascript">
</script>
</head>
<body>
</body>
</html>
I want to have a button that will add another row with the next number and space to imput data. Is there anyway to write that in a loop using Javascript?
How about:
<table id="specialtable">
<tr>
<th>Priority</th>
<th>Item</th>
</tr>
<tr>
<td>1</td>
<td><input type="text"><br></td>
<td><button onclick="addRow(this);">Add</button><br></td>
</tr>
</table>
<script type = "text/javascript">
function addRow(e) {
var current = e.parentNode.parentNode; // <tr>...</tr>
var tnew = current.cloneNode(true);
var rowCount = current.parentNode.getElementsByTagName("tr").length;
tnew.getElementsByTagName("td")[0].textContent = rowCount;
current.parentNode.appendChild(tnew);
}
</script>
</head>
<body>
</body>
</html>