On the images you can find page example. Look at the difference between left and right table. Left field is previous iteration, right - current iteration. I need:
(On previous iteration field)
Set background color on the position of new row
Create new row
After that move new row to the right field with JQuery animation.
First image:
Second image:
<div class="control">
<div class="prev_iter">
<div class="truthTable">
<table class="TT">
<tbody>
<tr>
<th class="bit" style="border: none"> </th>
<th class="bit" style="background-color: #87D37C">x<sub>2</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>1</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>0</sub></th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="current_iter">
<div class="truthTable">
<table class="TT">
<tbody>
<tr>
<th class="bit" style="border: none"> </th>
<th class="bit" style="background-color: #87D37C">x<sub>2</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>1</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>0</sub></th>
</tr>
<tr>
<td class="bit" style="border: none">0: </td>
<td class="bit">0</td>
<td class="bit">0</td>
<td class="bit">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="controlButtons">
<input id="back" name="back" onclick="controllerSwitchSteps(this.id);" type="button" value="<Previous">
Step <span id="stepNumber">2</span> from <span id="totalSteps">13</span>
<input id="next" name="next" onclick="controllerSwitchSteps(this.id);" type="button" value="Next>">
</div>
</div>
I'd recommend using a jQuery solution myself, you'll have to put in some work yourself and work on the animations yourself, but in order to take the last row of one table and put it on another, you should be able to do something like this:
$("tr").on("click", function() {
$(this).appendTo("#clonedTable");
});
td {
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Click on a row to move it to the other table!</p>
<table id="originalTable">
<tr>
<td>Data 1 </td>
<td>Data 2 </td>
<td>Data 3 </td>
</tr>
<tr>
<td>Data 4 </td>
<td>Data 5 </td>
<td>Data 6 </td>
</tr>
</table>
<hr />
<table id="clonedTable">
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</table>
Related
I've got 2 tables that I'm trying to shift rows between in HTML using JavaScript, but I'm not having much luck at the moment. I've tried plenty of solutions from here but none of them seem to be working for me at the moment!
Currently my HTML code is as per below
.container {
overflow: hidden
}
.tab {
float: left
}
.tab-btn {
margin: 50px
}
button {
display: block;
margin-bottom: 20px
}
<div class="container-fluid">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Manage Schools</h5>
<div class="container">
<div class="tab">
<table class="table table-sm table-hover" id="table1">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td>1</td>
<td>School A</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>School B</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>School C</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>School D</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>School E</td>
<td>
<input type="checkbox" "></td>
</tr>
<tr>
<td>6</td>
<td>School F</td>
<td><input type="checkbox "></td>
</tr>
</table>
</div>
<div class="tab tab-btn ">
<button>Add</button>
<button>Remove</button>
</div>
<div class="tab ">
<table class="table table-sm table-hover " id="table2 ">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Ideally, once a row has been shifted from table1 to the table2, it can then be removed from the table2 using the remove button. Also being able to select multiple rows and moving them at the same time would be a huge advantage.
Any and all help with the JavaScript would be very much appreciated!
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.
https://jsfiddle.net/5ac2mjpd/53/
"Show data in table" shifts its space whenever clicked. Is there a way to avoid it?
Basically I wanted the contents in the right of "dropdown" to collapse and the content present in the table to expand whenever "show data in table" link in clicked.
<div class="cont">
<select class="pull-left">
<option>123456789 1234 123</option>
<option>456</option>
</select>
<div class="pull-left in-block">
<div class="side-header">
<div>abc</div>
<div>def</div>
</div>
<div class="side-content1">
<div>ghi</div>
<div>jkl</div>
<div>mno</div>
</div>
</div>
<div class="clear details1 adjust-pos">
<span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
<div class="details1-content hide">
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2 </th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div class="cont clear">
<select class="pull-left">
<option>123456789 1234 123</option>
<option>456</option>
</select>
<div class="pull-left in-block">
<div class="side-header">
<div>abc</div>
<div>def</div>
</div>
<div class="side-content2">
<div>ghi</div>
<div>jkl</div>
<div>mno</div>
</div>
</div>
<div class="clear details2 adjust-pos">
<span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
<div class="details2-content hide">
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2 </th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
</tbody></table>
</div>
</div>
</div>
Hello everyone i started learning bootstrap for a while,
And i want to make close button for div boxes i have this code but the X button doesn't work:
<div class="panel panel-default">
<table class="table table-hover">
<thead>
<tr style="background-color: lavender;">
<th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
<th>×</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester</td>
<td>T1 2+p.p</td>
</tr>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr style="background-color: lightgreen;">
<th>Bet: 2100</th>
<th>Win: 55864</th>
</tr>
</tbody>
</table>
</div>
and here is the JavaScript:
$(document).ready(function() {
$("#hide").click(function(){
$("panel").hide();
});
});
You have to set an Id to the div class="panel" and set this id in a href=#id. THen change data-dismiss="modal" to data-dismiss="panel" and you can remove the javascript code.
You can check it here
https://jsfiddle.net/foyckLaf/
<div class="panel panel-default" id="current-pane">
<table class="table table-hover">
<thead>
<tr style="background-color: lavender;">
<th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
<th>×</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester</td>
<td>T1 2+p.p</td>
</tr>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr style="background-color: lightgreen;">
<th>Bet: 2100</th>
<th>Win: 55864</th>
</tr>
</tbody>
</table>
</div>
Related: How can I dismiss a bootstrap panel using data-dismiss?
There is no panel element, you need .panel:
$(".panel").hide();
panel corresponds to <panel></panel> element, clearly you don't have in in your code.
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});