So I am setting up Jeopardy game.
For the grid I am using HTML Tables. The first row has generic text right now ("Category 1 Name" for example).
Above the first row there will be another table with an HTML input box where the user can change the category name into whatever they want.
My problem is, I thought I would use document.getElementById("").innerHTML etc. to do this but that does not work.
How do I make it so that a user can input text into the form field and that entry changes the text in the table cell (td)?
This is what I have right now for the input field:
<table id="table1">
<tr>
<td>
<form>
<input type="text" placeholder="Category 1 Name">
<button>Submit</button>
</form>
</td>
</tr>
</table>
This is what I have for the box that I want to change the text:
<table>
<tr>
<td class="cat1">Category 1 Name</td>
</tr>
</table>
Thank you.
Would this solution be OK for you?:
function setCat1Name() {
document.getElementsByClassName("cat1")[0].textContent = document.getElementById("myInput").value
}
<table id="table1">
<tr>
<td>
<form>
<input id="myInput" type="text" placeholder="Category 1 Name">
<button onclick="setCat1Name()">Submit</button>
</form>
</td>
</table>
<table>
<tr>
<td class="cat1">Category 1 Name</td>
</tr>
</table>
Related
My previous question is here but it seems that using only window and document cannot get it done. What I want is that when the text from the first row is selected, the first input will be filled. Same for the second row.
javascript - select text in table cell and autofill the input on the same row
https://jsfiddle.net/nrdq71pz/6/
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
This is jQuery solution. (Actually easier than i thought, i've thought that selection text inside elements can't be reached so easily, but...):
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
Demo:
$('td').on('mouseup',function() {
if (window.getSelection){
s = window.getSelection().toString()
}
$(this).next().find('input').val(s);
});
td {
padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
<tr>
<td>Test code 3</td>
<td>
<input type='text' id='input3' class="selection" />
</td>
</tr>
</table>
So, point is to put event on cell, and then reach closest input (in your current hTML structure, this works, if you change something, you can modify it, easily, i guess)
I'm having trouble figuring out what you are asking but does this get the job done? When you click "Test code 1" it will fill in the input value to "Hello".
https://jsfiddle.net/nrdq71pz/8/
Html:
<table>
<tr>
<td class="select">Test code 1</td>
<td>
<input type='text' id='input1' class="selection" />
</td>
</tr>
<tr>
<td>Test code 2</td>
<td>
<input type='text' id='input2' class="selection" />
</td>
</tr>
</table>
jQuery:
$('.select').click(function(){
$('#input1').val("hello")
})
I just noticed your comment on a post above. I think what I did was wrong so take a look at what I did here and tell me which one is closer to what you need. https://jsfiddle.net/nrdq71pz/9/
I have to modify a row in my table
click on the row
hit modify button
modify the row
"modify" button has turned into "save" button, press save.
from my angular controller, how can i tell to the table to make the row editable?...Not which.... but how.
If you need with AngularJS please try this
<tr>
<td>Name</td>
<td>Surname</td>
<td><button>Modifiy</button></td>
<tr>
Replace it with
<tr>
<td>
<span ng-if="!isBeingModified">Name</span>
<input ng-if="isBeingModified" type="text" value="Name">
</td>
<td>
<span ng-if="!isBeingModified">Surname</span>
<input ng-if="isBeingModified" type="text" value="Surname">
</td>
<td>
<button ng-click="isBeingModified = !isBeingModified">
<span ng-if="isBeingModified">Save</span>
<span ng-if="!isBeingModified">Modify</span>
</button>
</td>
<tr>
//input field where user submit data into mysql database and immediately it shows in table
<form name="form" action="" method="post">
<input type="text" name="pitanje" class="search-input" placeholder="Pitajte..." />
<input class="search-btn" type="submit" value="Go" />
</form>
<table class='table'>
<tr>
<th>ID</th>
<th>Question</th>
<th>Date</th>
<th>Like</th>
<th>Views</th>
<th>Answer??</th>
</tr>
<tr>
<td>1</td>
<td>Question</td>
<td>Date</td>
<td>Views</td>
<td>Like</td>
<td>
<button>Press</button>
</td>
</td>
</tr>
</table>
Best example of that is http://www.incredibox.com/top-50 try to click on some row and you will see. Every row
I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You
if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}
Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}
<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}
In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.
I got index of a row. Column count is static so I know in which column to put what, but what I want is to be able using onclick event handler to change content in the specific cell. the element which has this onclick event applied is outside the table with all the text inputs that I want to copy contents from. a brief example
<table id="table1">
<tr>
<td>SomeText</td>
<td>SomeOtherText</td>
</tr>
<tr>
<td>SomeText2</td>
<td>SomeOtherText2</td>
</tr>
</table>
<div id="box1">
<form>
<input type="text" name="newText"/>
<input type="button" onclick="?" />
</form>
</div>
You can get to this specific cell using something like:
$('#table1 tr:eq(1) td:eq(1)')
Here it will select second row's second column (it's 0 based counting).
And then you can use jQuery.text() or jQuery.html().
You may do something like the following:
<table id="table1">
<tr>
<td>SomeText</td>
<td>SomeOtherText</td>
</tr>
<tr>
<td>SomeText2</td>
<td>SomeOtherText2</td>
</tr>
</table>
Then in you onclick method you can do something like following:
$('#table1 tr:eq(1) td:eq(1)').text("Whatever text you want");
OR
$('#table1 tr:eq(1) td:eq(1)').html("Whatever text you want");
you can use the java script and id.
<table id="table1">
<tr>
<td id=r1c1>SomeText</td>
<td id=r1c2>SomeOtherText</td>
</tr>
<tr>
<td id=r2c1>SomeText2</td>
<td id=r2c2>SomeOtherText2</td>
</tr>
</table>
<script>
function updatetxt(){
x=Document.getElementById(r1c1);
x.value=Document.getElementById(txt1).value
}
</script>
<div id="box1">
<form>
<input type="text" id=txt1 name="newText" />
<input type="button" onclick="updatetxt()" />
</form>
</div>