Develop Reference

How can I make my second selection working in JavaScript?

I am using the selection. I am selecting a value and getting the result in an input box, but the problem is, it is only working in the first row of my selection and not working when I am clicking second selection. Here is the code, Please share if you can solve this one or advice.
<script type="text/javascript">
function displayResult()
{
document.getElementById("mycall1").insertRow(-1).innerHTML = '<td><select id = "forcx" onchange="fillgap()"><option>Select</option> <option>Force</option><option>Angle</option><option>Area</option></select></td>';
document.getElementById("mycall2").insertRow(-1).innerHTML = '<td><input type="text" id="result1" size = "10" ></td>';
}
function fillgap(event){
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
var forcxlistValue = forcxlist.options[forcxlist.selectedIndex].text;
if (forcxlistValue == "Force"){
document.getElementById("result1").value = xnumb;
}
}
</script>

Ok, so if i understand correctly
1) You want to add the: selection, results & + to the existing table
2) Add the options Force, Angle & Area to the select
3) If Force is selected, put the value '20' in the results td
4) When the + is clicked, a new row is added.
5 The newly added rows should behave exactly the same.
Given the above, I have done the following, I'm using jQuery as its simpler and I'm more familiar with it. Its easy.
The trick here is event delegation. at the time your page loads the new rows don't exist, that's why your JavaScript isn't working on them. you can read about it here: https://learn.jquery.com/events/event-delegation/
Here's the result:
$(document).ready(function() {
// add headers to table
$('table tr:first-child').append('<th>Result</th><th>Add</th>');
//add fields to table
$('table tr:not(:first-child)').append('<td><select class="selection"><option></option><option value="Force">Force</option><option value="Angle">Angle</option><option value="Area">Area</option></select></td><td class="result"></td><td><button type="button" class="displayResultBtn">+</button></td>');
// add new row when button is clicked
$('table').on('click','.displayResultBtn', function( event) {
var tRow = $(this).parent().parent().clone();
$(this).parents('table').append(tRow);
$('table tr:last-child td.result').empty();
});
// when the dropdown is changed, update the result to 20 if "Force" is selected.
$('table').on('change','.selection', function( event) {
var selection = $(this).val();
if (selection == "Force") {
$(this).parent().next().html('20');
// You can add more coditionals if you want to add didferent values for the other options.
} else {
$(this).parent().next().empty();
}
});
});
table,
td,
th {
border: 1px solid black;
white-space: nowrap;
}
table {
border-collapse: collapse;
width: 30%;
table-layout: auto;
}
td {
text-align: center;
vertical-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
<tr>
<th>To</th>
<th>From</th>
<th>Detail</th>
<th>Selection</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>A+B</td>
</tr>
</table>

It's hard to answer with limited code provided, but I think your issue is that you are using id multiple times. Which is invalid. id should be unique and used once only.
I have put together some demo code here that will hopefully help you. It doesn't solve your exact problem(I dont have your html so i cant fully solve it). but hopefully this will give you an idea of how to handle accessing different rows, or specific unique ids.
I'm using jQuery here for simplicity, but the principle is the same:
Here's a fiddle if thats easier to play with: https://jsfiddle.net/BradChelly/4179e26q/
I hope this helps somewhat.
// highlight row by child selectors (:last-child)
$('#selectLastRowBtn').click(function(){
//clear any previous highlighting
$('#myTable tr:not(:first-child)').css('background-color','white');
// highlight the last row in the table.
$('#myTable tr:last-child').css('background-color','lightgrey');
});
// highlight row using a specific unique id
$('#selectRowByIdBtn').click(function(){
//get selected row id from dropdown
var rowId = $('#rowSelector option:selected').val();
//clear any previous highlighting
$('#myTable tr:not(:first-child)').css('background-color','white');
//highlight the row with the matching id from the selection dropdown
$('#myTable #row_'+rowId).css('background-color','lightgrey');
});
//
// ------Below is just stuff to make demo work, not relevant to the question
//
// Add row with unique id
$('#addNewRowBtn').click(function(){
var rowCount = $('#myTable tr').length;
$('#myTable').append('<tr id="row_'+rowCount+'"><td>23124</td><td>23124</td><td>23124</td><td>23124</td></tr>');
populateSelect(rowCount);
});
// populate select options
function populateSelect(rowCount){
$('#rowSelector').append('<option value="'+rowCount+'">'+rowCount+'</option>')
}
table {
width: 100%;
text-align: center;
}
table td {
border: 1px solid #333;
padding: 30px 0px;
}
table tr:first-child {
top: 0px;
background: #333;
}
table tr:first-child th {
color: #fff;
padding: 20px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
<th>Column Four</th>
</tr>
<tr id="row_1">
<td>23124</td>
<td>23124</td>
<td>23124</td>
<td>23124</td>
</tr>
</table>
<button id="addNewRowBtn">Add Row</button>
<h3>Using child selectors:</h3>
<button id="selectLastRowBtn">Highlight last row using child selector</button>
<h3>Highlight a row by id:</h3>
<select name="" id="rowSelector">
<option value="1">1</option>
</select>
<button id="selectRowByIdBtn">Highlight row by selected id</button>

Changing border left color based on value

I have a table where I want each row's border-left to differ based on priority level.
My HTML:
<tr id= "rows">
<td data-title="Link"><img src="form_blank.png" title="Agreement" width="40"/> ${gr1.short_description.getDisplayValue()}</td>
<td data-title="State"> ${gr1.state.getDisplayValue()} </td>
<td data-title="Due" input="date" data-date-format="MM/DD/YYYY">${gr1.due_date.getDisplayValue().substring(0,10)} </td>
</tr>
My Javascript:
<script>
function bordercolor() {
var leftborder = document.getElementById("rows");
if (${gr1.priority.getDisplayValue()} = 1){
leftborder.style.borderLeft = "solid 10px #b30000";}
else if (${gr1.priority.getDisplayValue()} = 2){
leftborder.style.borderLeft = "solid 10px #ffa500";}
else if (${gr1.priority.getDisplayValue()} = 3){
leftborder.style.borderLeft = "solid 10px #ffff00";}
else if (${gr1.priority.getDisplayValue()} = 4){
leftborder.style.borderLeft = "solid 10px #7fbf7f";}
else {leftborder.style.borderLeft = "solid 10px #006600";}
}
</script>
Any suggestions on what I'm doing wrong?

I'm not sure what ${...} means inside your code, hopefully I'm not missing something obvious but it's nothing I could recognize as valid. It smells to some preprocessing replacement logic but without confirmation is hard to say for sure.
Something else that is wrong at first sight is the fact that you're using assign operator (=) on the if statement instead of the equal operator (==)
Another problem is that tr can't take a border. Below you'll find how I would implement this. Notice the use of css classes instead of manipulating directly the element border. I'm also asigning an id to the table and using this control to apply styles instead of rows
HTML
<table id="table">
<tr>
<td data-title="Link"><img src="form_blank.png" title="Agreement" width="40"/> ${gr1.short_description.getDisplayValue()}</td>
<td data-title="State"> ${gr1.state.getDisplayValue()} </td>
<td data-title="Due" input="date" data-date-format="MM/DD/YYYY">${gr1.due_date.getDisplayValue().substring(0,10)} </td>
</tr>
</table>
CSS
.priority-1 td:first-child {
border-left: solid 10px #b30000;
}
.priority-2 td:first-child {
border-left: solid 10px #ffa500;
}
.priority-3 td:first-child {
border-left: solid 10px #ffff00;
}
.priority-4 td:first-child {
border-left: solid 10px #7fbf7f;
}
.priority-other td:first-child {
border-left: solid 10px #006600;
}
JAVASCRIPT
function bordercolor() {
var priority = ${gr1.priority.getDisplayValue()};
var table = document.getElementById("table");
if (priority <= 4)
table.className = "priority-" + priority;
else
table.className = "priority-other";
}
DEMO

You should be styling the leftmost td, you can't have a different left border on a row
The id attribute should be unique, rows would be better as a class
Leverage the variables you have when possible. Would this work?
<tr class= "rows" data-priority="${gr1.priority.getDisplayValue()}">
<td data-title="Link"><img src="form_blank.png" title="Agreement" width="40"/> ${gr1.short_description.getDisplayValue()}</td>
<td data-title="State"> ${gr1.state.getDisplayValue()} </td>
<td data-title="Due" input="date" data-date-format="MM/DD/YYYY">${gr1.due_date.getDisplayValue().substring(0,10)} </td>
</tr>
And css like this, targeting the data-priority attribute
.rows[data-priority="1"] td:first-child{ border-left: 2px solid #234324;}
.rows[data-priority="2"] td:first-child{ /* your css for this one */}
.rows[data-priority="3"] td:first-child{ /* your css for this one */}
/* and so on */

Jquery Append Table

html file
<div id='tweetPost'>
<table id="example">
<thead>
<tr>
<th>No</th>
<th>FistName</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JavaScript
$("#tweetPost").append(<tr>);
$("#tweetPost").append("<td>"+tweets.statuses[i].text + "<td/>");
$("#tweetPost").append("<td>"+tweets.statuses[i].created_at +"</td>");
$("#tweetPost").append(</tr>);
Above code when i try to run it , the table wont come out.
Question : How can i append the td row inside tbody??

You should try targeting your table id example and the tbody like so:
$("#example tbody").append("<tr><td>text</td><td>created</td></tr>");
See this link for a working example: append to example table

$('#tweetPost').append('<table></table>');
var table = $('#tweetPost').children();
table.append("<tr><td>a</td><td>b</td></tr>");
table.append("<tr><td>c</td><td>d</td></tr>");
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tweetPost'></div>
Note:- You can tackle your table id & the tbody

You are appending the tr in div instead of tbody and the is also some syntax error. Try like following.
$("#example tbody").append("<tr><td>" + tweets.statuses[i].text + "<td/><td>" + tweets.statuses[i].created_at + "</td><tr>");

You've missed inverted comma " " in first and last lines. Try this:
$("#tweetPost").append("<tr>");
$("#tweetPost").append("<td>"+tweets.statuses[i].text + "<td/>");
$("#tweetPost").append("<td>"+tweets.statuses[i].created_at +"</td>");
$("#tweetPost").append("</tr>");

Text angular doesnt load the cell borders in angularjs

I would like to be able to display a table with cell borders in a text angular div.
The content renders but the cell border doesnt
markup
<div ng-app="test">
<div ng-controller="testController">
<div text-angular name="testEditor" ng-model="htmlContent"></div>
</div>
</div>
controller code
angular.module('test', ['textAngular'])
.controller('testController',
function($scope, $timeout, textAngularManager) {
$scope.htmlContent = undefined;
//$scope.htmlContent = '<p>Hello There!</p>';
$timeout(function () {
$scope.htmlContent = "<table><tr><td style ='border: 1px solid black'>aaaa</td><td style ='border: 1px solid black'>dddddd</td></tr><tr><td style ='border: 1px solid black'>fffff</td><td style ='border: 1px solid black'>ffffffff</td></tr></table>";
//textAngularManager.refreshEditor('testEditor');
}, 1000);
});
This is demonstrated at ->
http://jsfiddle.net/x20mfq44/
However if i render the html in a separate jsfiddle without text angular, the cell borders show up fine.
<table>
<tr>
<td style ='border: 1px solid black'>aaaa</td>
<td style ='border: 1px solid black'>dddddd</td>
</tr>
<tr>
<td style ='border: 1px solid black'>fffff</td>
<td style ='border: 1px solid black'>ffffffff</td>
</tr>
</table>
https://jsfiddle.net/1xhfLpmq/

Are you using angular-sanitize? That can mess with HTML attrs through ng-model.

A rule of thumb - don't use inline styling in your html. It's messy and outdated.
A simple css rule can solve your problem, something like
table td {border: 1px solid black}
I updated your fiddle, here : http://jsfiddle.net/x20mfq44/1/
Hope this helps!

How to use single css class for multiple IDs?

I am trying to apply the following CSS to multiple divs under a given div ID.
.strikeout
{
background : blue;
}
I am using the following javascript code to change the color of the selected row in the grid,
$("#jqxGridInvoiceEntry").on("cellvaluechanged", function (event){
var rowindex = event.args.rowindex;
var checkboxState=event.args.value;
var rowTag=$("#row"+rowindex+"jqxGridInvoiceEntry div");
if(checkboxState==true)
{
rowTag.addClass("strikeout");
}
else
if(checkboxState==false)
{
rowTag.removeClass("strikeout");
}
});
See the screeshot below. When I select the checkbox in first row, its background color changes to blue. The problem is when I select the checkbox in second row, its background color changes blue but the previously selected row's background color disappears. The first row ID will be row0jqxGridInvoiceEntry and so on for subsequent rows.
I am using JQWidgets framework. The HTML code is,
<div style="float: left;" id="jqxGridInvoiceEntry"></div>

The only possibility, judging from the code you posted, is that the cellvaluechanged event also fires for the first row, perhaps because the checkbox in it is unchecked when you check the other checkbox in row 2.
This code:
else
if(checkboxState==false)
{
rowTag.removeClass("strikeout");
}
will remove the background color.

I think the way jquery implemented is little confusing. Here I am coming with different way of implementing the same result.
HTML
<table cellpadding="0" cellspacing="0" border="0" width="100%" id="MainTable">
<tr>
<td>First</td>
<td><input type='checkbox' /></td>
<td>Some INformation</td>
<td>Testing</td>
</tr>
<tr>
<td>Second</td>
<td><input type='checkbox' /></td>
<td>Some INformation</td>
<td>Testing</td>
</tr>
<tr>
<td>Third</td>
<td><input type='checkbox' /></td>
<td>Some INformation</td>
<td>Testing</td>
</tr>
</table>
CSS
table
{
border-top:1px solid #000;
border-right:1px solid #000;
}
table td
{
border-bottom:1px solid #000;
border-left:1px solid #000;
}
.green
{
background-color:green;
}
JQUERY
$('#MainTable input[type=checkbox]').on('click',function(){
$(this).parent().toggleClass('green').siblings().toggleClass('green');
});
Working JSFIDDLE Demo

.strikeout .otherdivClass .thirdCssClass {
background : blue; }

look to me like, your page is kind of reloaded when your callback is over.
if found this. they say you should use preventDefault() to forbid this behavior. hope it helps