I have a very unique situation that I am going to explain as best I can!
I want to output users in a style like so:
Username:Password
Username2:Password2
etc etc...
But I cannot place text in a paragraph like <p>Username:Password</p>
I can only do it like so... <p>Username:</p><p>Password</p>
And as I can only have seperate tags on the username and password the design ents up looking like so:
Username:
Password
I also cannot use any CSS whatsoever.
But I am able to use any type of HTML tags I like! (Span tags of course wouldn't work as they would both be separate still)
Is there any possible way to do this with the rules I have given you, I have tried everything!
(I know it sounds strange what I am wanting to do but I have a strange parser software that can only do this)
Here is a snippet of the code to show you how this works:
$ids = Array();
$usernames = Array();
$passwords = Array();
while ($row = $getaccounts->fetch_assoc()) {
$ids[] = $row["id"];
$usernames[] = "<span>".$row["username"].":</span>";
$passwords[] = "<span>".$row["password"]."</span><br />";
}
$activezero = implode(",",$ids);
$username = "".implode("",$usernames)."";
$password = "".implode("",$passwords)."";
echo $activezero;
I know this looks absolutely stupid, but trust me, this is the only way of getting my program to parse everything properly.
How can I make it output what I want using the code that I have?
There are some Options to solve this without using CSS, you could either use a table or a definition list, for example.
<table>
<thead>
<tr>
<th>Username</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice:</td>
<td>abc123</td>
</tr>
<tr>
<td>Bob:</td>
<td>pa$$word</td>
</tr>
</tbody>
</table>
<dl>
<dt>Alice:</dt>
<dd>abc123</dd>
<dt>Bob:</dt>
<dd>pa$$word</dd>
</dl>
Maybe sth like it?
<span>Username:</span><span>Password</span><br />
<span>Username2:</span><span>Password2</span>
Username:Password
Username2:Password2
jsfiddle
Related
I am taking in an input from a text box in one HTML page and saving it to local storage using this function.
function writeMail(emailInput){
console.log(emailInput);
localStorage.setItem('emailInput',emailInput);
let theEmail = localStorage.getItem('emailInput');
console.log(theEmail);
}
This works fine and I can check the inputs are correct through my console logs.
Yet when I try and get this from local storage to store in my table in my emailList html file, it seems to not work at all.
<body>
email = localstorage["emailInput"];
<table>
<caption> Email list
</caption>
<tr>
<th> Name </th>
<th> Email </th>
</tr>
<tr>
<td>email </td>
</tr>
</table>
</body>
For you to be able to manipulate the contents of HTML, you need to modify the DOM node specifically. In this specific case you should have an id attribute on the <td>and then use the innerHTML property of that node to set the desired value.
i.e.:
<td id="xpto"></td>
then on the code:
let theEmail = localStorage.getItem('emailInput');
document.getElementById("xpto").innerHTML = theEmail;
You should also set that code inside of a function that is called once the document has finished loading, so something like:
JAVASCRIPT:
function go(){
let theEmail = localStorage.getItem('emailInput');
document.getElementById("xpto").innerHTML = theEmail;
}
HTML:
<body onload="go()">
I have array of Objects and I add my data to HTML Table. Now I need to sort my data by version. How can I do something like that in React?
render() {
return (
<div>
<div>
<Label> We got {this.state.count} elements in our database. </Label>
</div>
<div>
<Table hover striped bordered responsive size="sm" >
<thead>
<tr>
<th>VERSION</th>
<th>DATE</th>
<th>UUID</th>
</tr>
</thead>
<tbody>
{this.state.results.map(result =>
<tr key={result.fileId}>
<td>{result.VERSION}</td>
<td>{result.ORIGIN}</td>
<td>{result.UUID}</td>
</tr>
)}
</tbody>
</Table>
</div>
</div>
);
}
}
Maybe I can use some js script, but tell me how to use it, I'm new with ReactJS. My version for is 0.26.8 for example.
I would use lodash's sortBy() function here:
https://lodash.com/docs/4.17.4#sortBy
const sorted = _.sortBy(this.state.results, 'VERSION')
Then map over sorted instead of the this.state.results
Simply make sure this.state.results is sorted correctly before rendering.
The simplest approach would likely be similar to the following:
{this.state.results.sort((a, b) => a.VERSION - b.VERSION).map(result =>
<tr key={result.fileId}>
<td>{result.VERSION}</td>
<td>{result.ORIGIN}</td>
<td>{result.UUID}</td>
</tr>
)}
Edit: Since you stated that the version is not a numeric value, but rather a semantic versioning string, your sort function needs to be a bit more complex. I suggest you have a look at this SO question, or use one of the many available libraries covering that use case.
const sorted = results.sort((x,y) => {
return parseInt(x.VERSION) - parseInt(y.VERSION);
});
sorts in Ascending order
I have a problem with my regular expression. I need to match blocks of HTML.
Example-Block here:
<tr class="tr-list " data-id="XX">
<td class="ip-img"><div class="gun-icon"></div><img src="https://example.com/images/stories/HCP/HCP_5.jpg"/></td>
<td class="ip-name ip-sort">Hotel Complex Project</td>
<td class="ip-price ip-sort">297.00</td>
<td class="ip-earnings ip-sort">43</td>
<td class="ip-shares ip-sort">86</td>
<td class="ip-status {'sorter':'currency'}"><img
src="/img/assets/arrow1.png" title="0.989990234375"/></td>
<td class="ip-blank-right"></td>
</tr>
Everyone of these blocks of HTML should match separately which I then want to extract the other data from (eg. ip-name, ip-price, ip-earnings..).
But my current regex matches everything until the "(?=)"-part is not true anymore:
http://regexhero.net/tester/?id=2b491d15-ee83-4dc7-8fe9-62e624945dcf
What do I need to change to have every block as a match?
Greetings! :)
PS.: Hope it is understandable what I mean...
This should get all the tr rows:
<tr class="tr-list[\s\S]+?</tr>
This should get all the tr rows with matching groups for the columns:
<tr class="tr-list[^<]*?<td class="ip-img">(.*?)</td>\s*<td class="ip-name.*?">(.*?)</td>\s*<td class="ip-price.*?">(.*?)</td>\s*<td class="ip-earnings.*?">(.*?)</td>\s*<td class="ip-shares.*?">(.*?)</td>\s*<td class="ip-status.*?">([\s\S]*?)</td>[\s\S]+?</tr>
nested html will require nested array from regular expression's match
it can be done using jquery or manually generate a tree using regular expression
This Regular Expression will capture a whole html block that is not self-enclosed:
var hmtlText="<div bar='baz'>foo</foo>";
var pattern = /<([\w]+)( (( +)?[\w]+=['"](\w+)?['"])?)+( )?(\/)?>((([\t\n\r\s]+)?)+(((.)+)?)+((\10)?)+)+?<\/(\1)>/igm;
console.log((pattern.test(htmlText) ? 'valid' : 'invalid') + ' html block');
CI table->generate($data1, $data2, $data3) will output my data in a form of simple table like:
<table>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</table>
What if I need a complex cell layout with multiple $vars within each cell:
$data1 = array('one', 'two', 'three');
and I want something like this:
<table>
<tr>
<td>
<div class="caption">$data1[0]</div>
<span class="span1">$data1[1] and here goes <strong>$data1[2]</strong></span>
</td>
<td>...</td>
<td>...</td>
</tr>
</table>
How should I code that piece?
For now I just generate the content of td in a model and then call generate(). But this means that my HTML for the cell is in the model but I would like to keep it in views.
What I would suggest is have a view that you pass the data that Generates the td structure. Capture the output of the view and pass this to the table generator. This keeps your structure in the view albeit a different one.
Hailwood's answer isn't the best way to do it.
the html table class has a data element on the add_row method. so the code would be:
$row = array();
$row[] = array('data' => "<div class='caption'>{$data1[0]}</div><span class='span1'>{$data1[1]} and here goes <strong>{$data1[2]}</strong></span>");
$row[] = $col2;
$row[] = $col3;
$this->table->add_row($row)
echo $this->table->generate();
as an aside, having a class named caption in a table is semantically confusing because table has a caption tag.
I would like to read the values of HTML td using prototype. For example, say you have a table as follows
<table id="myTable">
<tr>
<td>apple</td>
<td>orange</td>
</tr>
<tr>
<td>car</td>
<td>bus</td>
</tr>
</table>
I would like to read the values - apple, orange, car and bus alone. I am unable to find a
way to do it? Any help would be of great help.
Thanks,
J
This should work:
var values = $$('#myTable td').collect(function(element) {
// stripTags(), if you're only interested in the actual content
return element.innerHTML.stripTags();
});
The following returns an array of strings.
$$('#myTable td').pluck('innerHTML');