I'm need to copy some tr with inputs when onclick event is triggered, by clean JavaScript, not jQuery or something else, and generate ids for inputs. I attached my html. I'm new in js, whole what I found its copy one element. I'm be gradfull for any help.
<tr id='needToCopy'>
<tr style='height:16.5pt'>
<td></td>
<td colspan="" class="s4">
Label
</td>
</tr>
<tr style='height:18pt'>
<td></td>
<td colspan="3" class="s17">
Label1
</td>
<td class="s6">
<input id="firstID"/>
</td>
</tr>
<tr style='height:60.0pt'>
<td></td>
<td class="s15" colspan="3">
label2
</td>
<td class="s14">
<input id="secondID"/>
</td>
</tr>
<tr style='height:18.0pt'>
<td></td>
<td class="s15" colspan="3">
label3
</td>
<td class="s14">
<input id=thirdId"/>
</td>
</tr>
</tr>
<button onclick="copy()">Press Me</button>
If you are looking to copy the entire contents of the table, you can do it with a small bit of javascript. As mentioned in the comments, you can't have a table row inside a table row, so I'm not sure if you wanted your labels as table tds? For demo purposes I changed the surround <tr> to <table> tags. You can see the 'copy' functionality working in the snippet. I also added an id to your button.
EDIT: 2nd version is probably closer to what you're looking for (layout wise)
document.getElementById('copybtn').addEventListener('click', copybtn, false);
function copy() {
var html = $('#needToCopy').html();
$('#needToCopy tr:last').after("<tr>" + html + "</tr>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!--<table id='needToCopy'>
<tr style='height:16.5pt'>
<td></td>
<td colspan="" class="s4">
Label
</td>
</tr>
<tr style='height:18pt'>
<td></td>
<td colspan="3" class="s17">
Label1
</td>
<td class="s6">
<input id="firstID" />
</td>
</tr>
<tr style='height:60.0pt'>
<td></td>
<td class="s15" colspan="3">
label2
</td>
<td class="s14">
<input id="secondID" />
</td>
</tr>
<tr style='height:18.0pt'>
<td></td>
<td class="s15" colspan="3">
label3
</td>
<td class="s14">
<input id="thirdId" />
</td>
</tr>
</table>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h2>Labels</h2>
<table id='needToCopy'>
<tr style='height:18pt'>
<td>Label 1</td>
<td>Label 2</td>
<td>Label 3</td>
</tr>
<tr style='height:60.0pt'>
<td class="s6">
<input id="firstID">
</td>
<td class="s15">
<input id="secondID" />
</td>
<td class="s14">
<input id="thirdId" />
</td>
</tr>
</table>
<button id="copybtn" onclick="copy()">Press Me</button>
cloneNode if you want to make copy of same node in html.
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
It's quite simple if you want to copy a element inside
just use this code:
$("#IDTag").clone();
if you wish to prepend or append it, you can do that too by using:
$('#td').prependTo('#IDTag');
Be sure to give a ID to your element before you expect the results!
Related
I am trying to set width:13% of Date column. But it doesn't work in my way. Where is the problem? and can't reduce width of subject column. Thanks in advance.
Check FIDDLE
<div style="width:70%;float:left;">
<div>
<table style="width:100%;" class="TicketsDashboard">
<tbody>
<tr>
<td style="width:13%"><b>Date</b></td>
<td ><b>Type</b></td>
<td ><b>Subject</b></td>
<td ><b>Responsible</b></td>
<td ><b>Action</b></td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
<td>2019-07-21 12:52:08</td>
<td>Recommendation</td>
<td>First Subject going on perfectly edited</td>
<td>perfect</td>
<td class="editButtonMain">Edit</td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
<td>2019-07-21 12:53:26</td>
<td>Decision</td>
<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
<td>bangldesh</td>
<td class="editButtonMain">Edit</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: "item", id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
<table style="width:100%;" class="lightborder" id="headTable">
<tbody>
<tr id="slaTr">
<td width="100" valign="top">SLA:</td>
<td>
<div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
<div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
</td>
</tr>
<tr>
<td width="100">Status:</td>
<td id="statusTd">Suggestion</td>
</tr>
<tr>
<td>Protocol Number:</td>
<td id="breadCrumb">PROT-155</td>
</tr>
<tr>
<td>Subject:</td>
<td id="protsubject">Chonchol -- test</td>
</tr>
<tr>
<td>Start Date:</td>
<td id="protstartdate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>End Date:</td>
<td id="protenddate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>Keeper:</td>
<td id="protkeeper">ewrwer</td>
</tr>
</tbody>
</table>
</div>
your subject column is going out because u didn't used space in this code <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> if you want to be stop exceeding you can give space like this <td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
What actually you wanted to get let us know clearly.
To increase the width of td
instead of <td style="width:13%"> give <td style="padding-left:13%">
To avoid the overflow
add
<style>
table { table-layout:fixed; }
table td {word-wrap:break-word;}
</style>
Thanks,
the reason of it, you should set the same style for the given column in every rows, or add a thead section in which you set it once of the column.
I have this table, that should be a button that link to another page. The reason is that the values of the table should be changeable with data from a database. The parameter can be changes to pH for example and the Value to 7 or something. But the table/button shall link to the same page. Where it is possible to set the Target.
So far this i what i got:
<table class="Button" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
So how do i make it a link/button?
You can use onclick and redirect your page.
Or wrap your table with <a>
<table class="Button" onclick="location.href='yourpage.html'" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
The same way as anything else.
You put an <a> element (with an href attribute) around it.
Wrap it into a link element:
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
</a>
And if you wanna have a button, add a button element to that:
<button style="color:black; background-color:white; border-radius:5px;">
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
</a>
</button>
You can do it using javascript onClick event or put <a> tag around it
Html
<table class="button" onClick="linkTo('https://www.google.com')">
.
.
.
</table>
Java Script
<script>
function linkTo(var link){
window.location = link;
}
</script>
Css for mouse point
<style>
table.button{
cursor: pointer;
}
</style>
I have an HTML Table like the following.
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="total">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount">
<div id="discount"><input type="text" name="disco" class="dis"></div>
<input type="button" id="discount" name="apply" value="apply"/>
</td>
</tr>
</table>
I want the value of the input field with class=dis to a Javascript variable. I already tried the following, but failed.I am a noob in jQuery.
$("#items #disc").val();
#disc is a tr. The input has the class dis. Try like following.
$("#items #disc .dis").val();
I have a table that looks like this:
<table>
<tr>
<td class='class1' id='id1'></td>
<td class='class2' id='id2'></td>
<td class='class3' id='id3'></td>
<td class='class4' id='id4'><button id='editButton'></button></td>
</tr>
<tr>
<td class='class1' id='id1'></td>
<td class='class2' id='id2'></td>
<td class='class3' id='id3'></td>
<td class='class4' id='id4'><button id='editButton'></button></td>
</tr>
</table>
The code below shows me id4:
$("#editButton").on("click", function(){
alert($(this).parent().attr("id"));
});
Now I need to reach id3 which is the closest one. The functions .next('class3') and .closest('class3') do not help me or i am using them in a wrong way. Please help me
1st : id must be unique
so your code should like
<table>
<tr>
<td class='class1' id='id1'></td>
<td class='class2' id='id2'></td>
<td class='class3' id='id3'></td>
<td class='class4' id='id4'><button class="editButton"></button></td>
</tr>
<tr>
<td class='class1' id='id5'></td>
<td class='class2' id='id6'></td>
<td class='class3' id='id7'></td>
<td class='class4' id='id8'><button class="editButton"></button></td>
</tr>
</table>
and in js
$(".editButton").on("click", function(){
alert($(this).closest('tr').find('td:nth-child(3)').attr("id"));
});
I have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.
Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.
//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}
I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})
I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.