This question already has answers here:
React colspan not working
(6 answers)
Closed 5 years ago.
I'm trying to use a <table>...</table> inside React. I have this:
<table>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td colSpan={2}> ... </td>
</tr>
</tbody>
</table>
React ignores colSpan. I've been dealing with this for a while. I found some question like this here in Stackoverflow, and the answers are to camelcase the colspan, but it doesn't work for me. It goes the same in <th colSpan={2}>...</th> What am I missing here?
It's
<td colSpan='2'>
Not
<td colSpan={2}>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 months ago.
Learning Javascript at the moment, so please bear with me. I created a table in my connected.html and I am trying to obtain the element between the <td> tags in my event-page.js. I used document.getElementByID("tokens"), however I get null, I want to get 12. I think I have to do more with document.getElementByID("tokens") I used .innerText and .innerHTML but those didn't work. Any help would be appreciated! Sorry for such a simple problem.
*Note: The function in event-page.js is called when a button is clicked by the user.
connected.html
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan="4" class="info">Tokens</td>
</tr>
<tr>
<td id="tokens">12</td>
</tr>
</table>
</body>
</html>
event-page.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
if (request.action.split(':')[0] === 'got-it'){
yt_name = (request.action.split(':')[1])
console.log(yt_name)
let table = document.getElementById("tokens")
console.log(table)
}
})
This Works, that means your EventListener are called before the DOM is loaded.
let table = document.getElementById("tokens")
console.log(table)
<table>
<tr>
<td colspan="4" class="info">Tokens</td>
</tr>
<tr>
<td id="tokens">12</td>
</tr>
</table>
This question already has answers here:
JavaScript/jQuery: replace part of string?
(2 answers)
Closed 6 years ago.
<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><h3 class="ms-standardheader"><a name="SPBookmark_Category"></a>Category</h3></td>
<td valign="top" class="ms-formbody" width="350px" id="SPFieldChoice">
<td width="350" class="ms-formbody" id="SPFieldChoice" valign="top">
<!-- FieldName="Category"
FieldInternalName="Category"
FieldType="SPFieldChoice"
-->
Health & Fitness
</td>
</td>
</td>
</tr>
I need to replace & with & using jQuery from Health & Fitness. How can I do that.
Using javascript string .replace function.
var el = $('#SPFieldChoice');
el.html(el.html().replace("&", "&"));
Working Fiddle
Find td text and use replace .
$('td#SPFieldChoice').text().replace('&','&')
1) You should not have the same IP for different
2) use $('idOfYourNode').text().replace("&", "&");
I want to replace a particular text in an HTML with another text from another element, which in this case is a table data.().
Here is my table:
<table id="hftable">
<tr>
<td id="hfpn1">V.Sehwag</td>
<td id="hfp1">DNB</td>
<td id="hfp1b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn2">G.Gambhir</td>
<td id="hfp2">DNB</td>
<td id="hfp2b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn3">A.Arora</td>
<td id="hfp3">DNB</td>
<td id="hfp3b">.-.-..-.</td>
</tr>
</table>
where batsman1 is the id of the element where the replacement is to take place or more specifically the table looks like:
<table id="current">
<tr>
<td id="batsman1">Batsman 1</td>
<td id="currentbat1"></td>
</tr>
<tr>
<td id="batsman2">Batsman 2</td>
<td id="currentbat2"></td>
</tr>
<tr>
<td>Bowler</td>
<td></td>
</tr>
</table>
I want to replace Batsman 1 (in the table with id="current") with V.Sehwag (in the table with id="hftable") (when someone clicks on a specific button on the page)
I have tried:
$("#batsman1").text($("#hfpn1").val());
This isn't working. Apart of showing "V.Sehwag" in place of "Batsman 1", it is showing me a blank space.
Any ideas where I am wrong? What is the correct and easy way to do this?
Thank You.
Try to use .text() in this context, You are invoking .val() function over a non-input element, obviously it wont work. And do remember that, .val() only works on input elements on which user can input something via the UI.
$("#batsman1").text($("#hfpn1").text());
The TD element does not have a value, it has text. Modify your code as follows:
$("#batsman1").text($("#hfpn1").text());
Here's the jsFiddle
Use the below, I hope this will help you out to fix the problem.
$("#batsman1").html($("#hfpn1").text());
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I don't know what I'm doing wrong. This is a 2 part question. Please see code below. First, it keeps saying that the variable capitals is null. Second, I'm unable to get innerHTML working. I'm not sure why it isn't working. I know I have document.write which I'm not suppose to use so I'm working on understanding getElementbyId.innerHTML to work.
HTML
<form name="shares">
<table>
<tr><td>Enter information here:</td></tr>
<tr>
<td>Capital to Invest</td>
<td id="capitalr"><input type="text" name="capital"> </td>
</td>
</tr>
<tr>
<td>Price per share</td>
<td><input type="text" name="price" onchang="calculate();"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Compute" onclick="calculate()"></td>
<tr><td>The quantity you can be:</td></tr>
<tr>
<td>No. of shares</td>
</tr>
<tr>
<td>Change</td>
</tr>
</table>
<p id="hello"></p>
</form>
JavaScript
var capitals = document.getElementById("capitalr");
var x = capitals.id;
var pps = document.shares.price.value;
function calculate () {
document.write("Capital = " + capitals +"<br>");
document.write("Price per share is = " + pps);
}
document.getElementById("hello").innerHTML="Hello";
1) The <tr> for your button doesn't have a </tr>.
2) There's a timing problem -- you need to put your code in a function that executes at onload time.
<body onload="fnonload();">
I suggest you use "console.log" statements as a debugging tool to see how your code is progressing. That's helped me a lot.
I have an HTML table which is generated dynamically from server.
I want to have an expand/collapse in this html table that is when I click on expand I should get a new column and rows and on collapse, it should be as it was before.
I don't want to use any 3rd party plugin for it. I want to use jQuery and Ajax.
Can you help me or provide any info on how can I do this?
Ok I think the question is too vague to be answered completely if you think about.
Where are the contents of the new columns, and rows, coming from? What structure do you have? What've you tried already? What didn't work? David Thomas comment.
If you don't want to use a jQuery plugin like this one it means you will have to do it yourself and a) nobody here will do it for you completely b) much less without any information, that would just be guessing.
That said here is a quick and dirty example of what your approach should be like.
HTML
<table border="1">
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
jQuery
$(".clickable").click(function() {
$(this).next().toggle();
});
As I said it's just an example, it's not scalable (doesn't even support hiding two rows) you can see a demo here.
I can update the answer with a better more personalized answer if you update your question.
But if you want to build it yourself, this are some of this could come in handy:
.show()
.hide()
.toggle()
.animate()
:nth-child
.children()
And many other depending on your approach.
Good luck!
Here is a quick example, I hope It helps if I understood your question correctly.
With this structure:
<a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
<thead>
<tr>
<td>
HEAD
</td>
<td>
HEAD
</td>
<td>
HEAD
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
</tbody>
</table>
Maybe you could do something like this:
$(document).ready(function () {
$(".expand").click(function () {
$("#mytable tbody").show("slow");
});
$(".collapse").click(function () {
$("#mytable tbody").hide("fast");
});
});
An accordion is a simple, elegant solution: javascript and css.
This fiddle is from the W3Schools explanation above.