Why Am I Not Able to Add Input Text into My Table

Adding text input to table

Here's a quick solution. Hope this helps.

$(function() {
  $('input[name=add-game]').click(function() {        // Lets get the information ready to be added    var name = '<td>' + $('input[name="game-name"]').val() + '</td>';    var rating = '<td>' + $('input[name="game-rate"]').val() + '</td>';    var btnDelete = '<td><button class="delete btn btn-block btn-sm btn-danger">Delete</button></td>'        // Lets append the information into the game table    $('tbody[id="game-table"]').append('<tr>' + name + rating + btnDelete + '</td>');
    // Since we've created a delete button, we need to bind    // an event listener to the button so that we can     // delete it from the table if the user clicks it    $('.delete').on('click', function() {      $(this).parent().parent().empty();    });
  });  });

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>Exercises</title>    <link rel="stylesheet" href="style.css">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  </head>  <body>    <div class="container-fluid">      <div class="jumbotron">        <h2 class="text-center"><b>FAVORITE VIDEO GAMES <small>(all genres) <span class="glyphicon glyphicon-globe"></span></small></b></h2>      </div>
      <div class="text-center row">        <div class="col-sm-6 col-md-6">          <ul class="list-group"><h4>These are the games that James like the most</h4>            <li class="list-group-item">...</li>            <li class="list-group-item">...</li>            <li class="list-group-item">...</li>          </ul>        </div>        <div class="col-sm-6 col-md-6">          <ul class="list-group"><h4>These are the games that <b>YOU</b> like the most</h4>            <li class="list-group-item">`empty`</li>            <li class="list-group-item">`empty`</li>            <li class="list-group-item">`empty`</li>          </ul>        </div>      </div>
      <hr>      <br>
      <div class="row">        <div class="col-sm-12 col-md-12 col-lg-12">          <form class="text-center" action="index.html" method="post">            Game: <input type="text" name="game-name" value="" placeholder="Choose the game">            Rate: <input type="text" name="game-rate" value="" placeholder="Rate the game">            <input class='btn btn-xs btn-success' type="button" name="add-game" value="Add Game">          </form>          <br>          <div class="container">            <table class="table table-bordered table-striped">              <thead>                <th>Name of the game</th>                <th>Rating</th>                <th><span class="glyphicon glyphicon-remove"></span></th>              </thead>              <tbody id="game-table">                <!-- Here will be added the games -->              </tbody>            </table>          </div> <!-- Close CONTAINER -->        </div>      </div> <!-- Close ROW -->    </div> <!-- Close CONTAINER-FLUID -->
    </div>  <script src='script.js'></script>  </body></html>

Can't type in React input text field

You haven't properly cased your onchange prop in the input. It needs to be onChange in JSX.

<input
  type="text"
  value={this.props.searchString}
  ref="searchStringInput"
  onchange={this.handleChange} <--[should be onChange]
/>

The topic of passing a value prop to an <input>, and then somehow changing the value passed in response to user interaction using an onChange handler is pretty well-considered in the docs.

They refer to such inputs as Controlled Components, and refer to inputs that instead let the DOM natively handle the input's value and subsequent changes from the user as Uncontrolled Components.

Whenever you set the value prop of an input to some variable, you have a Controlled Component. This means you must change the value of the variable by some programmatic means or else the input will always hold that value and will never change, even when you type -- the native behaviour of the input, to update its value on typing, is overridden by React here.

So, you're correctly taking that variable from state, and have a handler to update the state all set up fine. The problem was because you have onchange and not the correct onChange the handler was never being called and so the value was never being updated when you type into the input. When you do use onChange the handler is called, the value is updated when you type, and you see your changes.

HTML input inside table cell

Since the text on the input can't be predicted, every input with width:100% tries to get the most width it can. The solution is use a wrapping div with absolute positioning.

This is how it works (it obvious to me that OP understands the "wrapper div with absolute position" trick. The following is intended for someone learning CSS):

.table .tr-inputs th has position: relative so it serves as reference for child absolute positioned objects. We do not set anything about width (so it's completely auto), and we set a padding-bottom: 1.2rem to keep the th with the correct height for our absolute positioned elements (since absolute positioned elements are removed from the flow and "does not take any space").
.table .tr-inputs div is our wrapper div. We set position: absolute and set all top,right,left,bottom to 0. Then, it stretches it self to fill its relative positioned parent, which is our .table .tr-inputs th.
input has width: 100% so it takes all the width of its parent, which is our absolute positioned wrapper div.

.table {
  font-family: Arial, Helvetica, sans-serif;
}

.table thead {
  position: sticky;
  top: 0;
}

.table thead th {
  border: 1px solid #e4eff8;
  background: white;
  cursor: pointer;
}

.table thead th.header-label {
  cursor: pointer;
  background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%);
  color: white;
  border: 1px solid white;
}

.table th,
.table td {
  padding: 0.2rem 0.5rem;
  text-align: center;
}

.table td {
  border: 1px solid #e4eff8;
}

.table .tr-inputs th {
  position: relative;
  padding: 0;
  padding-bottom: 1.2rem;
  margin: 0;
}

.table .tr-inputs div {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.table input {
  width: 100%;
  box-sizing: border-box;
}

<table class="table">
  <thead>
    <tr>
      <th class="header-label">Index</th>
      <th class="header-label">Name</th>
      <th class="header-label">Phone</th>
      <th class="header-label">Company</th>
      <th class="header-label">Registered</th>
      <th class="header-label">Is Active</th>
    </tr>
    <tr class="tr-inputs">
      <th>
        <div><input type="number"></div>
      </th>
      <th>
        <div><input type="string"></div>
      </th>
      <th>
        <div><input type="string"></div>
      </th>
      <th>
        <div><input type="string"></div>
      </th>
      <th>
        <div><input type="date"></div>
      </th>
      <th>
        <div><input type="boolean"></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>Paige Bean</td>
      <td>+1 (871) 458-2959</td>
      <td>MOREGANIC</td>
      <td>2018-12-27T11:28:50 -01:00</td>
      <td>false</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Knox Holman</td>
      <td>+1 (880) 497-2808</td>
      <td>MAINELAND</td>
      <td>2017-05-07T02:54:22 -01:00</td>
      <td>false</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Brandy Colon</td>
      <td>+1 (969) 513-2827</td>
      <td>NEXGENE</td>
      <td>2017-06-07T06:42:31 -00:00</td>
      <td>true</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Suzette Austin</td>
      <td>+1 (863) 445-3604</td>
      <td>JETSILK</td>
      <td>2015-10-24T11:10:41 -01:00</td>
      <td>true</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Downs Cain</td>
      <td>+1 (822) 574-2617</td>
      <td>INSECTUS</td>
      <td>2017-10-19T08:18:09 -01:00</td>
      <td>true</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Michael Yang</td>
      <td>+1 (875) 492-3905</td>
      <td>DELPHIDE</td>
      <td>2016-08-15T01:31:55 -01:00</td>
      <td>false</td>
    </tr>
  </tbody>
</table>

submit input text into table as <td>

This is using your code - BTW I added id="switch" for the checkbox input (to link to for="switch") For options it only takes into account "Any Colour" though. The "+" button makes it add rows. I used "return false" to stop the form from submitting when the + button is clicked.

function addRow() { var item_text = $('#item-code-input').val(); var size_text = $('#sizes-item-code').val(); var options_text = $('#switch').is(':checked') ? 'Any Color' : ''; $('#items-table').append('<tr>'  +'<td>'+item_text+'</td>'  +'<td>'+size_text+'</td>'  +'<td>'+options_text+'</td>'  +'</tr>');}
$(function(){  $('#add-item').click(function(){    addRow();    return false;  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="bg">
    <button id="droplist-btn" class="droplist-btn">Add By Droplist</button> <form>    <input type="text" id="item-code-input" class="item-code-input" placeholder=""></input>    <button type="submit" id="add-item" class="add-item">+</button>    <input type="text" id="color-input" placeholder="color"></input>    <select type="text" id="sizes-item-code" class="sizes-item-code">        <option value="Small">Small</option>        <option value="Medium">Medium</option>        <option value="Large">Large</option>        <option value="XLarge">XLarge</option>        <option value="One Size">One Size</option>    </select>    </label>    <label class="switch">    <input type="checkbox" id="switch">    <span class="slider"></span>    </label>    <label for="switch">Any Color</label>    </form>    <table id="items-table">        <!--<caption>Task</caption>-->        <tr>            <th>Item</th>            <th>Size</th>            <th>Options</th>        </tr>        <tr>
        </tr>    </table>    <label id="item-code-label">Item Code</label>    <!-- idk what happened here -->    <label class="radio">.    <input type="radio" checked="checked" name="radio">    <span class="check-item"></span></label><label id="keyword-label">Keyword</label><label class="radio">.<input type="radio" name="radio"><span class="check-keyword"></span></label>
 </div><script src="jquery.js"></script><script src="items.js"></script>
</body></html>

add input text into html table td when double clicked

Sorry for misunderstanding, this is the pure javascript version

javascript code

function closeInput(elm) {
    var td = elm.parentNode;
    var value = elm.value;
    td.removeChild(elm);
    td.innerHTML = value;
}

function addInput(elm) {
    if (elm.getElementsByTagName('input').length > 0) return;

    var value = elm.innerHTML;
    elm.innerHTML = '';

    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('value', value);
    input.setAttribute('onBlur', 'closeInput(this)');
    elm.appendChild(input);
    input.focus();
}

html code

<table>
    <tr>
        <td dir="ltr" id="test1" class="tLine" nowrap ondblclick="addInput(this)">sdadfew</td>
    </tr>
</table>

jquery version still at http://jsfiddle.net/ZLmgZ/

Taking input from text field and inserting into created table in HTML

You are almost there. The problem is this line:

document.getElementById("courseName").innerHTML = courseName;

To get the value of the input with id "courseName" and set it to the variable called courseName, you should do this instead:

var courseName = document.getElementById("courseName").value;

<html>        <head>                <link type="text/css" rel = "stylesheet" href= "StudentStyle.css">                        <title>Student Page</title>                        <script type ="text/javascript">src = "registerBox.js" </script>                    </head>            <body>                <div id = "all">                        <h1 align="center">Student page of NAMEHERE</h1>                    <h2 align="center">NAMEHERE's Class Schedule</h2>                                
            <table id ="enrolled" align="center">                <tr id ="titleRow">                        <th>Course</th>                        <th>Course Number</th>                        <th>Room</th>                </tr>
                           </table>                            <div id = "registerBox">                <button onclick="addCourse()">Register</button>                <input type = "text" id = "courseName" placeholder= " Course Name">                <input type = "text" id = "courseNumber" placeholder = "Course Number">                <input type = "text" id = "Room" placeholder = "Room">            </div>
                </div>
                <script>                    function addCourse() {                        var i = 1 ;                        console.log(enrolled)                        var row = enrolled.insertRow(i);                        var cell1 = row.insertCell(0);                        var cell2 = row.insertCell(1);                        var cell3 = row.insertCell(2);
                        var courseName = document.getElementById("courseName").value;                                                cell1.innerHTML = courseName;                        cell2.innerHTML = "test2";                        cell3.innerHTML = "test3";                    }                </script>            </body></html>

Text within input (inside a table td) is not showing properly with IE9 when text length is less than the length of td

The width of an <input type="text"> element is by default20 “average” characters. Browsers differ in their idea of “average”, and they may use different default fonts, so that widths of characters vary. But the rendering is not very different across popular browsers with their default settings

The width can be changed using the size attribute or by setting width in CSS. It does not depend on the content or on the width of the parent element (unless you set the input element’s width in a manner that creates such a dependency, using the % unit).

If you have some data that you wish to show to the user and also pass forward as form data, as readonly, then you get more flexibility if you separate these functions. Put the data as normal content, e.g. in a span element (to be able to style it) and separately into a hidden field:

<input type="hidden" value="some_long_string_comes_here" name="foo">
<span class="show">some_long_string_comes_here</span>

I have added a name attribute, since without it, the field does not give any contribution to the form data.

In this approach, the visible text appears as normal text by default.