How to create the checkbox in the D3 table

951 views
Skip to first unread message

Kim2013

unread,
Jan 15, 2014, 5:46:17 PM1/15/14
to d3...@googlegroups.com
Hi all 
Attached is the htm file to create the Sorted table d3.
Also pasted the code below.

On top the page I have the "create State" and "delete State" button. 
So I want to create the input box (<input type="checkbox" id="stateid" </td> ) next to state so the user can check the box and hit the delete button to delete all the checked state but
have some issues - don't know how to do so.
Your help is greatly appreciated.


Thanks,
Kim


<!DOCTYPE html>
<meta charset="utf-8">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sortable Table</title>

<script language="javascript" type="text/javascript" src="table.js"></script>
<script language="javascript" type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
<script language="javascript" type="text/javascript" src="d3.v3/d3.v3.js"></script>
<script language="javascript" type="text/javascript" src="lib/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script language="javascript" type="text/javascript" src="lib/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
<link type="text/css" href="lib/syntaxhighlighter_3.0.83/styles/shCoreDefault.css" rel="stylesheet" />
<link type="text/css" href="css/base.css" rel="stylesheet" />

<style>

.syntaxhighlighter { overflow-y: hidden !important; }

body {
 font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
 font-size:12px;
}

#chart {
 width: 500px;
 height: 500px;
}

.bodyTable td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.bodyTable tr {
height: 40px;
}

.bodyTable tr:hover {
background-color:grey;
}

.headerTable th:hover {
background-color:grey;
}

.scroll {
overflow: auto;
}

</style>

</head>
 
<body>
<script>
    function deleteState() {
      alert("This is deleteState");
    }
    function createState() {
      alert("This is createState");

    }
</script>

<h2>Scrollable, Sortable HTML Table with Static Headers Using d3.js</h2>
<br/>
<div class="command_buttons" id="add_state_btn" onclick="createState()">Create New State</div>
<div class="command_buttons" id="delete_state_btn" onclick="deleteState()">Delete State</div>


<div id="chart"></div>



<script> 
var chart = document.getElementById("chart");
var width = chart.offsetWidth;
var height = chart.offsetHeight;
var myData = [
{
"fullname" : "Oregon",
"value" : 10
},
{
"fullname" : "Washington",
"value" : 12
},
{
"fullname" : "Nevada",
"value" : 2
},
{
"fullname" : "Florida",
"value" : 7
},
{
"fullname" : "Texas",
"value" : 7
},
{
"fullname" : "Maine",
"value" : 1
},
{
"fullname" : "Idaho",
"value" : 34
},
{
"fullname" : "New Mexico",
"value" : 3
},
{
"fullname" : "Georgia",
"value" : 3
},
{
"fullname" : "Montana",
"value" : 9
},
{
"fullname" : "Ohio",
"value" : 13
},
{
"fullname" : "Alaska",
"value" : 1000
}
]
var valueFunc = function(data) {
return data.value;
}
var textFunc = function(data) {
return data.fullname;
}
var columns = ["State", "Value"];
drawTable(myData, "#chart", { width: width, height: height }, valueFunc, textFunc, columns);

function drawTable(data, tableid, dimensions, valueFunc, textFunc, columns) {

    var sortColumn1Ascending = function (a, b) { return textFunc(a).localeCompare(textFunc(b)); }
    var sortColumn1Descending = function (a, b) { return textFunc(b).localeCompare(textFunc(a)); }

    var sortColumn0Ascending = function (a, b) { return textFunc(a).localeCompare(textFunc(b)); }
    var sortColumn0Descending = function (a, b) { return textFunc(b).localeCompare(textFunc(a)); }
    
     var column1Ascending = true;
     var colunn0Ascending = false;


    var width = dimensions.width + "px";
    var height = dimensions.height + "px";
    var twidth = (dimensions.width - 25) + "px";
    var divHeight = (dimensions.height - 60) + "px";

    var outerTable = d3.select(tableid).append("table").attr("width", width);

    outerTable
.append("tr")
.append("td")
        .append("table").attr("class", "headerTable").attr("width", twidth)
        .append("tr").selectAll("th").data(columns).enter()
.append("th")
.text(function (column) { return column; })
        .on("click", function (d) {
            var sort;
            // Choose appropriate sorting function.
            if (d === columns[1]) {
                if (column1Ascending) sort = sortColumn1Ascending;
                else sort = sortColumn1Descending;
                column1Ascending = !column1Ascending;
            } else if(d === columns[0]) {
                if (colunn0Ascending) sort = sortColumn0Ascending;
                else sort = sortColumn0Descending;
                colunn0Ascending = !colunn0Ascending;
            }
            var rows = tbody.selectAll("tr").sort(sort);
        });

    var inner = outerTable
.append("tr")
.append("td")
.append("div").attr("class", "scroll").attr("width", width).attr("style", "height:" + divHeight + ";")
.append("table").attr("class", "bodyTable").attr("border", 1).attr("width", twidth).attr("height", height).attr("style", "table-layout:fixed");

    var tbody = inner.append("tbody");
    // Create a row for each object in the data and perform an intial sort.
    var rows = tbody.selectAll("tr").data(data).enter().append("tr").sort(sortColumn0Descending);

    // Create a cell in each row for each column
    var cells = rows.selectAll("td")
        .data(function (d) {
            return columns.map(function (column) {
                return { column: column, text: textFunc(d), value: valueFunc(d)};
            });
        }).enter()
        .append("td")
.text(function (d) {
if (d.column === columns[0]) return d.text;
else if (d.column === columns[1]) return d.value;
});
}
</script>

<script> SyntaxHighlighter.all()  </script>


</body>
</html>

SortTable_ori2.htm

Philip Pedruco

unread,
Jan 17, 2014, 10:54:18 PM1/17/14
to d3...@googlegroups.com
You could try adding an object to mydata that included the input information. You would then add a line into your cells variable, such as 

    .html(function (d,i) { if d.column === columns[2] {
            return d.input
        }

You'd also have to add another if condition to the .text line to exclude anything inadvertently being placed in the 3rd column.  Note that I haven't tested this code!

Also, if you could set-up a fiddle or something similar it would make answering your questions easier (see the advice on the front page of this group).
Reply all
Reply to author
Forward
0 new messages