i have a table like this:
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Family</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="div1">
#foreach(var item in Model)
{
<tr>
<th>item.Id</th>
<td>item.Name</td>
<td>item.Family</td>
<td>item.Age</td>
</tr>
}
</div>
I want to cut div1 content and paste to table tbody tag with jquery
the result that i need is:
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Family</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model)
{
<tr>
<th>item.Id</th>
<td>item.Name</td>
<td>item.Family</td>
<td>item.Age</td>
</tr>
}
</tbody>
</table>
also i use this code but doesn't work:
<script>
$(document).ready(function () {
$("#div1").replaceAll("tbody");
}
</script>
I tried with some jquery method but mostly copy all div(div tag with content)
but i need only cut content of div.
please help me
This might help you.
$('#div1').contents().appendTo('tbody')
Related
example of the table
<table class="tg">
<thead>
<tr>
<th class="tg-0lax" id="blank-spaces"></th>
<th class="titles" id="this">????</th>
<th class="titles">???<br></th>
<th class="titles">???</th>
<th class="titles">???</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>not empty do nothing</td>
<td></td>
</tr>
</tbody>
<table>
Now the way this is really written, data will be pushed into each td from an API, some times that API is down, and I would like to use jquery to check if a td has anything displaying in it and if it doesnt I want there to be a string with an error message in the td. This is the jquery im trying currently
var empty = $("td").trim().filter(function () { return this.value.trim() === null })
empty.addClass("errorDefault");
if ($("td").hasClass("errorDefault")) {
this.val("$0");
this.text("$0");
this.html("<p>There was an error getting data</p>");
}
There is no .trim() in jQuery
string trim() is not going to return null.
table cells do not have value
$("td").hasClass("errorDefault") only looks at first element
$("tbody td")
.filter((_, td) => !td.textContent.trim().length)
.addClass("errorDefault")
.text("$0");
.errorDefault {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-0lax" id="blank-spaces"></th>
<th class="titles" id="this">????</th>
<th class="titles">???<br></th>
<th class="titles">???</th>
<th class="titles">???</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>not empty do nothing</td>
<td></td>
</tr>
</tbody>
<table>
If it is truly empty, CSS can do it.
tbody td:empty{
background: red;
}
tbody td:empty:after {
content: "$0";
}
<table class="tg">
<thead>
<tr>
<th class="tg-0lax" id="blank-spaces"></th>
<th class="titles" id="this">????</th>
<th class="titles">???<br></th>
<th class="titles">???</th>
<th class="titles">???</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>not empty do nothing</td>
<td></td>
</tr>
</tbody>
<table>
So what I'm currently trying to do know is if a column has a value of "TO BE CHECK" the "Print" button will be disabled.
Can someone help me with this?
Code is attached below.
<form action="" method="POST">
<table id="MyTable" class="table">
<thead>
<tr>
<th scope="col">Food Lane Sticker Control Number</th>
<th scope="col">OR/CR #</th>
<th scope="col">Business Permit #</th>
<th scope="col" id="test">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody name="MyTable" id="tbody">
<tr name="MyTable">
<th name="MyTable"></th>
<th name="MyTable"></th>
<th name="MyTable"></th>
<th name="MyTable">TO BE CHECK</th>
<td name="MyTable">
<button type="submit" id="print" name="print" class="btn btn-success">Print</button>
</td>
</tr>
</tbody>
</table>
</form>
With JQuery, you could do
$('#MyTable th[name="MyTable"], #MyTable td[name="MyTable"]').each( function(i,e){
if (e.innerHTML === "TO BE CHECK") {
$('#Print').prop('disabled', true);
}
} );
disabled onclick="addtocart()" />
I am generating a html table serverside with Java and sending it as a JSON to the client. So my response is a plain text looking like this:
<table class="table"></table><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody>
My jQuery Script looks like this
if(reply.type === "highscores") {
var el = reply.value.replace(/\s+/g,' ').trim();
console.log(el);
$('.score-table').empty();
$('.score-table').html(el);
}
the console.log outputs the plain text quoted above.
Now the expected behavior is that the table will be displayed in the div with the class "score-table" but instead its just showing the following:
# Username Score 1 Marvin 3.0 2 testerich 3.0
So it basicly stripped al the html tags off the string? Im searching for hours now but did not find a solution for this.
The problem is your html response, not jQuery or js. Look at the first row of your html:
<table class="table"></table>
This doesn't make any sense. It needs to look like this:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> 1 </th>
<td>Marvin</td>
<td>3.0</td>
</tr>
<tr>
<th scope="row"> 2 </th>
<td>testerich</td>
<td>3.0</td>
</tr>
</tbody>
</table>
You have closed the Table right after you opened it..
<table class="table"></table>
update your html to this:
<table class="table"><thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">Username</th> <th scope="col">Score</th> </tr> </thead><tbody> <tr> <th scope="row"> 1 </th> <td>Marvin</td> <td>3.0</td> </tr> <tr> <th scope="row"> 2 </th> <td>testerich</td> <td>3.0</td> </tr></tbody></table>
Is there possible for the angular repeat to achieve that?Basically Im wondering there is a way to loop the 2 together? Really appreciate any help!
Controller:
$scope.date=[
{ID:1,Date:'2016-11-12'},
{ID:2,Date:'2016-11-15'},
{ID:3,Date:'2016-12-06'}
]
HTML:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
And I wish the column Bal and Order will repeat side by side under each date column.
You can use ng-repeat-start and ng-repeat-end which was introduced in Angular 1.2
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
Working example https://jsfiddle.net/9ve3fu0m/
You can accomplish this by using a nested table like this:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">
<table border="1" >
<tr>
<th colspan="2">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
</th>
</tr>
</table>
You can use ng-repeat-start and ng-repeat-end
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
</tr>
This question already has answers here:
Adding a table row in jQuery
(42 answers)
Closed 9 years ago.
I'm using foundation 5 framework (not sure if that matters). I will be passing all information to another page, so it's very important that each CELL is an individual distinguishable item/value when I do pass it, but I'm not sure on how to start on this problem. It should add another row every time add is hit. Same goes for Delete.
Can anyone guide me on how to approach this? Here is what my mark up looks:
<a href="#" class="button>Add line</a>
<a href="#" class="button>Delete line</a>
<div style="width:98%; margin:0 auto">
<table align="center">
<thead>
<tr>
<th>Status</th>
<th>Campaign Name</th>
<th>URL Link</th>
<th>Product</th>
<th>Dates (Start to End)</th>
<th>Total Budget</th>
<th>Daily Budget</th>
<th>Pricing Model</th>
<th>Bid</th>
<th>Targeting Info</th>
<th>Total Units</th>
</tr>
</thead>
<tbody>
<tr>
<td>df</td>
<td>dfd</td>
<td>fdsd</td>
<td>fdsfd</td>
<td>dsf</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
<td>dd</td>
</tr>
</tbody>
</table>
</div>
HTML (assuming the thead doesn't change):
Add line
Delete line
<div style="width:98%; margin:0 auto">
<table align="center" id="table">
<thead>
<tr>
<th id="0">Status</th>
<th id="1">Campaign Name</th>
<th id="2">URL Link</th>
<th id="3">Product</th>
<th id="4">Dates (Start to End)</th>
<th id="5">Total Budget</th>
<th id="6">Daily Budget</th>
<th id="7">Pricing Model</th>
<th id="8">Bid</th>
<th id="9">Targeting Info</th>
<th id="10">Total Units</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JavaScript:
<script type="text/javascript">
<!--
var line_count = 0;
//Count the amount of <th>'s we have
var header_count = $('#table > thead').children('th').length - 1;
$(document).ready(function() {
$('#add').click(function() {
//Create a new <tr> ('line')
$('#table > tbody').append('<tr></tr>');
//For every <th>, add a <td> ('cell')
for(var i = 0; i < header_count; i++) {
$('#table > tbody > tr:last-child').append('<td id="'+ line_count +'_'+ i +'"></td>');
}
line_count++; //Keep track of how many lines were added
});
//Now you still need a function for deleting.
//You could add a button to every line which deletes its parent <tr>.
});
-->
</script>