ドラッグで選択できるセルを指定する方法とは？| OKWAVE

ドラッグでセルを選択した後に

ドラッグでセルを選択した後に、別の場所をドラッグするとその前に選択したセルの色が消えるようにしたいのですがどなたか方法がわかりますでしょうか？施設予約サイトを作っているのですが、間違えた時間をドラッグしたときに、もう一度別のセルをドラッグすると、予約するための情報は最後にドラッグしたときの情報をとるのですが、UI的にはよくないので直したいと思っているのですが、できません。わあかるかたいたらお願いします。ドラッグは縦一列のみできるように制限をかけています。下は、セルをドラッグするところに関係するコードです。まだ必要なコード（仕組みが分かるコード）があるときには補足します。 var startCell = null; //マウスダウンのイベント処理 function mouseDown(table, e){ if (!e) var e = window.event; startCell = e.srcElement? e.srcElement: e.target; if(startCell.tagName != "TD"){ startCell = null; return; } mouseMove(table, e); } //マウスアップのイベント処理 function mouseUp(table, e){ if (!e) var e = window.event; var endCell = e.srcElement?e.srcElement:e.target; if(!(endCell.tagName=="TD" && startCell)) return false; //セルの位置を取得 var from = getCellPos(table, startCell); var to = getCellPos(table, endCell); if(!from || !to) return false; //mouseMoveで選択状態表示の更新をさせないようにする startCell = null; //alert("("+from.col+", "+from.row+") -> ("+to.col+", "+to.row+")"); document.form1.fromcol.value=from.col; document.form1.fromrow.value=from.row; document.form1.tocol.value=to.col; document.form1.torow.value=to.row; } //マウス移動のイベント処理 function mouseMove(table, e){ if (!e) var e = window.event; var endCell = e.srcElement?e.srcElement:e.target; if(!(endCell.tagName=="TD" && startCell)) return false; //セルの位置を取得 var from = getCellPos(table, startCell); var to = getCellPos(table, endCell); if(!from || !to || from.day != to.day) return false; //色を変更 var x, y, cells; for(y=2; y<table.rows.length; y++){ row = table.rows.item(y); for(x=0; x<row.cells.length; x++){ if((from.row-y)*(y-to.row)>=0 && (from.col-x)*(x-to.col)>=0) row.cells.item(x).style.backgroundColor = "#888888";//選択状態の色 //else // row.cells.item(x).style.backgroundColor = "transparent";//未選択状態の色 } } } //tableの中のcellの位置を取得する function getCellPos(table, cell){ var pos = new Object(); if(cell.nodeName == "TD"){ var x, y, cells; for(y=0; y<table.rows.length; y++){ row = table.rows.item(y); for(x=0; x<row.cells.length; x++){ if(row.cells.item(x) == cell){ pos.row = y; pos.col = x; if(2>y || 1>x) pos = null; pos.day = (x+1 - (x+1)%2) / 2; return pos; } } } } return null; } </script>

セルをドラッグで選択するときに、

７×７のセルをドラッグで選択をするときに、選択できない場所を作りたいと思っているのですが、どのようにすればいいのでしょうか？ネット上にあるサンプルでは画像の（０、０）のセルから選択できるのですが、これを（１，２）を選択できるセルの開始点として５×６の範囲で選択できるようにしたいと思っています。 </tytle>までのひながた以降のコードです。わかる方よろしくお願いします。 <style type="text/css"> html, body{ margin: 0px; } table{ -moz-user-select: none; -khtml-user-select: none; user-select: none; width: 500px; height: 500px; } table, td, th{ margin: 10px; border-style: solid; border-color: black; border-width: 1px; } </style> <script type="text/javascript"> var startCell = null; //マウスダウンのイベント処理 function mouseDown(table, e){ if (!e) var e = window.event; startCell = e.srcElement? e.srcElement: e.target; if(startCell.tagName != "TD"){ startCell = null; return; } mouseMove(table, e); } //マウスアップのイベント処理 function mouseUp(table, e){ if (!e) var e = window.event; var endCell = e.srcElement?e.srcElement:e.target; if(!(endCell.tagName=="TD" && startCell)) return false; //セルの位置を取得 var from = getCellPos(table, startCell); var to = getCellPos(table, endCell); if(!from || !to) return false; //mouseMoveで選択状態表示の更新をさせないようにする startCell = null; //ここに選択後の処理を書く alert("("+from.col+", "+from.row+") -> ("+to.col+", "+to.row+")"); } //マウス移動のイベント処理 function mouseMove(table, e){ if (!e) var e = window.event; var endCell = e.srcElement?e.srcElement:e.target; if(!(endCell.tagName=="TD" && startCell)) return false; //セルの位置を取得 var from = getCellPos(table, startCell); var to = getCellPos(table, endCell); if(!from || !to) return false; //色を変更 var x, y, cells; for(y=0; y<table.rows.length; y++){ row = table.rows.item(y); for(x=0; x<row.cells.length; x++){ if((from.row-y)*(y-to.row)>=0 && (from.col-x)*(x-to.col)>=0) row.cells.item(x).style.backgroundColor = "#ffdddd";//選択状態の色 else row.cells.item(x).style.backgroundColor = "transparent";//未選択状態の色 } } } //tableの中のcellの位置を取得する function getCellPos(table, cell){ var pos = new Object(); if(cell.nodeName == "TD"){ var x, y, cells; for(y=0; y<table.rows.length; y++){ row = table.rows.item(y); for(x=0; x<row.cells.length; x++){ if(row.cells.item(x) == cell){ pos.row = y; pos.col = x; return pos; } } } } return null; } </script> </head> <body> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-9296140-1"); pageTracker._trackPageview(); } catch(err) {} </script>  <table onmousedown="mouseDown(this, event); return false;" onmouseup="mouseUp(this, event);" onmousemove="mouseMove(this, event); return false;"> <tr> <td>(0,0)</td><td>(1,0)</td><td>(2,0)</td><td>(3,0)</td><td>(4,0)</td><td>(5,0)</td><td>(6,0)</td> </tr> <tr> <td>(0,1)</td><td>(1,1)</td><td>(2,1)</td><td>(3,1)</td><td>(4,1)</td><td>(5,1)</td><td>(6,1)</td> </tr> <tr> <td>(0,2)</td><td>(1,2)</td><td>(2,2)</td><td>(3,2)</td><td>(4,2)</td><td>(5,2)</td><td>(6,2)</td> </tr> <tr> <td>(0,3)</td><td>(1,3)</td><td>(2,3)</td><td>(3,3)</td><td>(4,3)</td><td>(5,3)</td><td>(6,3)</td> </tr> <tr> <td>(0,4)</td><td>(1,4)</td><td>(2,4)</td><td>(3,4)</td><td>(4,4)</td><td>(5,4)</td><td>(6,4)</td> </tr> <tr> <td>(0,5)</td><td>(1,5)</td><td>(2,5)</td><td>(3,5)</td><td>(4,5)</td><td>(5,5)</td><td>(6,5)</td> </tr> <tr> <td>(0,6)</td><td>(1,6)</td><td>(2,6)</td><td>(3,6)</td><td>(4,6)</td><td>(5,6)</td><td>(6,6)</td> </tr> </table> </body> </html>

特定の列の<td>または<th>だけにスタイルを

かけたいということがあります。例えば、 ---------------------------------------------------------- <style type="text/css"> .tab1 th, .tab1 td { font-weight:normal; text-align:center; background:#fee; } .tab1 .row2 th { /* ----------------(1) */ background:#fff; } .tab1 .col2 th { /* ----------------(2) */ background:#ffff; } </style> <table class="tab1"> <col class="col1"> <col class="col2"> <col class="col3"> <tr class="row1"> <th>1</th> <th>2</th> <th>3</th> </tr> <tr class="row2"> <th>4</th> <td>5</td> <td>6</td> </tr> <tr class="row3"> <th>7</th> <td>8</td> <td>9</td> </tr> <table> ---------------------------------------------------------- だと、 1 2 3 4 5 6 7 8 9 の中の「4」は(1)により背景が白くなります。しかし、(2)のようにしても「2」の背景は白くなりません。 <col>ってそういうものなのでしょうか？ <td>または<th>にidをつけてスタイルをかけるしかないのでしょうか？よろしくお願いします。

キーボードショートカットでthickboxなどを起動したいのですが・・・・

よろしくお願いいたします。 Webアプリのデザインを作成中なのですが、 javascriptでキーボードのショートカットキーを押してログイン画面を出したいと思い、できれば特定のキーを押したときにthickboxやlightboxでHTMLを表示できないかなと思っているのですが可能でしょうか？以下のソースで一応Fキーを押すとリンクだけはできるのですが、 thickboxを定義するとなるとclassnameをどのように定義すればよいのでしょうか。あまりJSの知識がないので、ご助力いただければ幸いです。どうぞよろしくお願いいたします。 function shouldIgnoreInput(e) { var el = e.target || e.srcElement return el && el.tagName && (el.tagName.toUpperCase() == "INPUT" || el.tagName.toUpperCase() == "SELECT" || el.tagName.toUpperCase() == "TEXTAREA"); } function hotkey(e) { var nav4 = window.Event ? true : false; if(shouldIgnoreInput(e)) { return true; } if ((typeof e.ctrlKey != 'undefined') ? e.ctrlKey : e.modifiers & Event.CONTROL_MASK > 0) { return true; } if ((typeof e.altKey != 'undefined') ? e.altKey : e.modifiers & Event.ALT_MASK > 0) { return true; } if ((typeof e.metaKey != 'undefined') && e.metaKey) { return true; } else if((typeof Event != 'undefined') && (e.modifiers & Event.META_MASK > 0)) { return true; } if (nav4) var whichCode = e.which else if (e.type == "keypress") var whichCode = e.keyCode else var whichCode = e.button; if( whichCode == 114) { cancelEvent(e); window.location.reload(); return false; } else if( whichCode == 102 ) { cancelEvent(e); url = "login.html"; window.location.href = url; return false; } return true; } function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; } }

インラインフレーム内の変数を親ページから呼び出す

インラインフレーム内のマウス位置を↓のjavascriptコードで取得しているのですが、親ページのjavascriptの関数で使用したいです。どのようにインラインフレーム内の変数を親ページから呼び出して、利用すればよいのでしょうか？ var x, y; window.addEventListener("DOMContentLoaded", function(){ window.document.onmousemove = function(e){ x = getMousePosition(e).x; } },false); function getMousePosition(e) { var obj = new Object(); if(e) { obj.x = e.pageX; obj.y = e.pageY; } else { obj.x = event.x + document.body.scrollLeft; obj.y = event.y + document.body.scrollTop; } return obj; }

Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript">  </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。正しく取得する方法はありますか？ <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい（マウスイベントで調べられるが、それを使わずに調べたい） </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>

WebDatabaseのlistから選択項目表示

HTML5 Web Database でlistから選択した項目を詳細表示したい。詳細一覧detail_b()押下した際、listで選ばれているレコード内容を表示したい。色々試しているのですが・・・どこがおかしいかわかりません。 function load() で list.options[list.options.length] = new Option(row.val2, row.val, row.key1); 項目表示した場合、 function detail_b() でどのようなSELECT文を書けば listで選択された行を指定できるのですか？ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> var db = openDatabase("my_sample3", "", "Sample for my3", 1024*1024); db.transaction(function(tx) { tx.executeSql("create table if not exists storage (key1, val, val2)"); }); function load() { db.transaction(function(tx) { tx.executeSql("select * from storage", [], function(tx, rs) { var list = document.getElementById("list"); list.innerHTML = ""; var rows = rs.rows; for (var i = 0, n = rows.length; i < n; i++) { var row = rows.item(i); list.options[list.options.length] = new Option(row.val2, row.val, row.key1); } }); }); } function detail_b() { var list = document.getElementById("list"); if (list.selectedIndex < 0) { return; } var selected = list.options[list.selectedIndex].value; db.transaction(function(tx) { tx.executeSql("select * from storage where key1 = ?", [selected], function(tx, rs) { var rows = rs.rows; var row = rows.item(0); detail.innerHTML = ""; detail.options[detail.options.length] = new Option(row.val2, row.val, row.key1); }); }); } function remove() { 省略 } function add() { 省略 } </script> </head> <body onload="load()"> <h1></h1> <table border="0"> <tbody> <tr> <td colspan="2"><select id="list" size="5" style="width: 200px"></select></td> <td><button onclick="detail_b()">詳細一覧</button><BR><button onclick="remove()">削除</button></td> <td rowspan="4"><select id="detail" size="5" style="width: 400px"></select></td> </tr> <tr> <td><font face="Times New Roman">キー:</font></td> <td><input type="text" id="key1"></td> <td></td> </tr> <tr> <td><font face="Times New Roman">値:</font></td> <td><input type="text" id="value"></td> <td></td> <td></td> </tr> <tr> <td><font face="Times New Roman">値２:</font></td> <td><input type="text" id="value2"></td> <td><button onclick="add()">追加</button></td> </tr> </tbody> </table> </body> </htm>

VBAユーザーフォームを使った入力で文字列になる

お世話になります。ユーザーフォームを使った入力で日付や金額を入力する箇所があります。例えば日付で2019/12/2と入力したところ、反映されるExcelシートには日付ではなく文字列で入力されたことになります。セルの書式設定を日付にしていても文字列になってしまいます。下記にコードを入力しておきます。ご教示のほど宜しくお願い致します。 Sub Registration(Row As Long) ' Dim Col As Integer Dim TCount As Integer Dim CCount As Integer ' TCount = 1 ' For Col = 2 To Len(Table) ' If Mid(Table, Col, 1) = "T" Then TCount = TCount + 1 Cells(Row, Col) = Controls("TextBox" & TCount) Controls("TextBox" & TCount) = "" Else CCount = CCount + 1 Cells(Row, Col) = Controls("ComboBox" & CCount) Controls("ComboBox" & CCount) = "" End If Next Col End Sub

ファンクションキー制御？

こんにちわです。タイトル通りなのですが、 JSでは、 function kdown(e) {var msg =""; var flg = 1; switch(window.event.srcElement.tagName){ case "INPUT" :if(event.srcElement.type != "text" && event.srcElement.type != "password" && event.keyCode!=9 && event.keyCode!=16 && event.keyCode!=32){return false;}else{flg=0;}break; case "TEXTAREA" :flg = 0;break; case "SELECT" :flg = 0;break; case "A" :flg = 2;break; } switch(event.keyCode){ case 8 :msg = "BS";break; case 78 :if(event.ctrlKey){msg = "Ctrl+N";}break; case 82 :if(event.ctrlKey){msg = "Ctrl+R";}break; case 116 :msg = "F5";break; case 122 :msg = "F11";break; } if(event.altKey){msg = "Alt";} if (flg == 0 ){switch(event.keyCode){case 8 :msg = "";break;case 13 :msg = "";break;}} else if (flg == 2 && event.keyCode==13)msg = ""; if(msg != ""){event.keyCode = 0;return false;}else{return true;} } document.onkeydown = kdown; こんな感じに制御するのを、アクションスクリプトで制御出来ますか？ HTMLにこのJS埋め込んでも、FLASHの所クリックして、各キー押すと意味なくなってしまうので・・ F5やF11など使用されたくないのですが・・・入れ替えなどでも良いのですが。。。宜しくお願いします。

クリックごとに文字色が交互に変化する（赤青赤青赤青・・・・・）

クリックごとに文字色が変化するプログラムを作りたいのですがchangeColor()の部分の処理がうまく動作しません。おそらくif文の条件の表記が間違っていると思うのですが、どのように書き換えればいいのでしょうか？ <html> <head> <script language="JavaScript">  </script> </head> <body > <table border="10" width="100" height="100" align="center" valign="top" bgColor="#ffffff"> <tr> <td><a href="javascript:void(0)"onClick="changeColor()"><font size="7">A</font></a></td> <td><a href="javascript:void(0)"onClick="changeColor()"><font size="7">B</font></a></td> </tr> </table> </body> </html>

要素の表示/非表示の実験

をしてみました。 <input type="button" onclick="f()" value="push"/> <input type="button" onclick="g()" value="push"/> <table> <tr><td>a</td><td>b</td><td>c</td></tr> <tr id="x"><td>x</td><td>y</td><td>z</td></tr> <tr><td>u</td><td>v</td><td>w</td></tr> <tr id="y"><td>x</td><td>y</td><td>z</td></tr> <tr><td>a</td><td>b</td><td>c</td></tr> </table> <script> function f() { var x=document.getElementById('x').style.visibility; if(x=='hidden') document.getElementById('x').style.visibility='visible'; else document.getElementById('x').style.visibility='hidden'; } function g() { var x=document.getElementById('y').style.display; if(y!='none') document.getElementById('y').style.display='none'; else document.getElementById('y').style.display='block'; } </script> です。最初のボタンは単に表示するかどうかだけで位置は消えた場所に詰められません。次のボタンは消えるとその場所に他の要素が詰められます。しかし消えたものは次にボタンを押しても消えたままです。消えた場所に要素が詰められしかも再表示できるようにするにはどうしたらいいのでしょうか?

javascriptで困っています

マウスがブラウザーの外側から出ると、ポップアップが出るようにしたいです。 loadEvents: function() { this.addEvent(document, "mouseout", function(e) { e = e ? e : window.event; if(e.target.tagName.toLowerCase() == "input") return; var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); if(e.clientX >= (vpWidth - 50)) return; if(e.clientY >= 50) return; var from = e.relatedTarget || e.toElement; if(!from) bioEp.showPopup(); }.bind(this)); 現在は、上方向に出るとポップアップが出ます。左右にマウスが出た時に、ポップアップ出るにはどう記述すれば良いでしょうか。よろしくお願いいたします。

vb.net web 動的に作成したTableが消える

よろしくお願いします現在、vs.net 2005 で web ページを作成していますそこで質問があるので、ご教授の程よろしくお願いします。 test.aspx Table コントロール配置:Table1 Button コントロール配置:Button1 Label コントロール配置:Label1 Label コントロール配置:Label2 test.aspx.vb Partial Class test Inherits System.Web.UI.Page Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles form1.Load Dim row As TableRow Dim col As TableCell If (Page.IsPostBack = False) Then Label2.Text = "aaa" row = New TableRow col = New TableCell : col.Text = "行0:列0" : row.Cells.Add(col) : col = Nothing col = New TableCell : col.Text = "行0:列1" : row.Cells.Add(col) : col = Nothing Table1.Rows.Add(row) row = New TableRow col = New TableCell : col.Text = "行0:列0" : row.Cells.Add(col) : col = Nothing col = New TableCell : col.Text = "行0:列1" : row.Cells.Add(col) : col = Nothing Table1.Rows.Add(row) End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = "Rows.Count" & Table1.Rows.Count End Sub End Class ボタンを押すと、 Label2の "aaa" は保持されていて Table1が保持されないのはなぜなのでしょうか？ Table1 の内容を保持させたいのですがその場合、どのようにすればよいのでしょうか

tableの中のtableが追加できない。

罫表追加ボタンを押すと既存のtableの中に新しくtableを追加する処理を作成しましたが、追加した罫表が正しく表示されません。罫表追加後、innerHTMLでテキストボックスに表示し、それをコピーして、HTMLで開いてみるときちんと追加されているようです。なぜtableの中のtableが作られないのでしょうか。別の方法でも良いので、ボタンをおした時に動的にtableの中にtableを追加する方法ありますでしょうか。以下HTMLとjsです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="kei_test.js"></script> </head> <body> <div> <input type="button" value="罫表追加" onclick="addDanraku('keihyou')" /> </div> <form name='form1'> <input type="text" name="strJbnTxt" size=100 maxlength=10000 /> </form> <table width="100%" border=1 style='border-collapse:collapse;border:none'> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt'> <p>あいうえお。</p> </td> </tr> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt;'> <p>かきくけこ。</p> </td> </tr> </table> </body> </html> 以下jsファイル var cellCnt = 0; var rowArray = new Array(100); var colArray = new Array(100); window.onload = init; function init(){ var mouseFlg = 0; var col; var row; var td = document.getElementsByTagName("td"); var length = td.length; //alert('td数:'+length); for(var i = 0; i < length; i++) { td[i].onclick = function (){ this.style.backgroundColor = "yellow"; //列番号取得 var befTd = this.previousSibling; var col = 0; while(befTd){ if(befTd.nodeName=="TD")col++; befTd=befTd.previousSibling; } //行番号取得 var befTr = this.parentNode.previousSibling; var row=0; while(befTr){ if(befTr.nodeName=="TR") row++; befTr=befTr.previousSibling; } rowArray[cellCnt] = row; colArray[cellCnt] = col; cellCnt = cellCnt + 1; } } } function addDanraku( danraku ){ if( cellCnt != 1){ alert("１つのみ選択して実行してください。"); return; } //trを取得 var trNode = document.getElementsByTagName("tr"); var trLength = trNode.length; for(var i = 0; i < trLength; i++) { if( i == rowArray[0]){ //新しい段落（tr）を追加 var newTr = document.createElement("tr"); var nextTr = trNode[i].nextSibling; var oyaTable = nextTr.parentNode; oyaTable.insertBefore(newTr, nextTr); //tdを追加 var newTd = document.createElement("td"); newTd.style.width = "100.0%"; newTd.style.border = "solid windowtext 1.0pt"; newTr.appendChild(newTd); //tableノードを追加 alert(newTd.nodeName); var newTable = document.createElement("table"); newTable.style.border = "none"; newTable.style.borderCollapse = "collapse"; newTd.appendChild(newTable); //trノードを追加 for(var j = 0; j < 2; j++) { var newTr2 = document.createElement("tr"); newTable.appendChild(newTr2); for(var k = 0; k < 2; k++) { //tdノードを追加 var newTd2 = document.createElement("td"); newTd2.style.width = "100.0pt"; newTd2.style.border = "solid windowtext 1.0pt"; newTr2.appendChild(newTd2); //pノードを追加 var newP2 = document.createElement("p"); newTd2.appendChild(newP2); //textノードを追加 var newText2 = document.createTextNode("追加テスト"); newP2.appendChild(newText2); } } } } form1.strJbnTxt.value = newTr.parentNode.parentNode.parentNode.innerHTML; }

二つの関数を一つにまとめることが出来るでしょうか？

クリックする対象が同じですが、別々に開発？しましたら二つの関数になってしまいました。一つにまとめることが出来るでしょうか？ http://www.okweb.ne.jp/kotaeru.php3?q=430536 http://www.okweb.ne.jp/kotaeru.php3?qid=456289 を参考にさせていただきました。 <html> <head> <title></title> <script language="JavaScript">  </script> </head> <body onClick="unCheck()"> <table border> <td id="20" name="1" onClick="chk(this)">abc </td></table> <form method="POST" name="form1" action=""> <input type="text" size="10" name="send"><br> <input type="submit" value="送信"> </form> </body> </html> <html> <head> <title></title> <script language="JavaScript">  </script></head> <body onClick="unCheck()"> <table border> <td id="20" name="1" onClick="Exchange('blue','yellow');">abc </td></table> </body> </html>

jquery input 要素取得

失礼します。現在テーブルに記載されているテキストとinputの要素を取得して配列に格納したいのですが、input要素を取得できませんソースコードはこちらです。ご教授いただけますでしょうか。宜しくお願い致します。 <table id="tbl"> <tr> <td>fdfasdf</td> <td>hfadhfh</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> <tr> <td>hfdaha</td> <td>hfdsahsa</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> </tbody> </table> <script> var data = []; var tr = $("table tr");//全行を取得 for(var i=0, l=tr.length; i<l;i++ ){ //行数分回す var nk = 0; var cells = tr.eq(i).children();//1行目のtrの子要素は取得 for(var j=0, m=cells.length; j < m; j++ ){ //子要素分のcell分回す 0 < cell if(typeof data[i] == "undefined"){ //typeof(型判定) data[i] = []; //data[0] } if(nk < 2){ data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 data[0][0] ++nk; } data[i][j] = cells.eq(j).val(); } } </script>

Javascriptについて質問です。

Javascriptについて質問です。いまJavascriptを勉強しているのですがどうしても分からない所が出てきましたので是非ご教授願います。教材を買ってきて勉強しているのですが、そこに載っているのものでこういった問題が書かれていました。　　　↓ 以下のコードを分析して、アラートボックスに表示される値を書いてください。 function doThis(num){ num++; return num; } function doThat(num){ num--; return num; } var x=doThis(11); var y=doThat; var z=doThat(x); x=y(z); y=x; alert(doThat(z-y)); そこで分からなかったので答えを見てみるとこう書かれていました。 var x=doThis(11);　　　　　　　　　 var y=doThat; var z=doThat(x); x=y(z); y=x; alert(doThat(z-y)); ↓↓ x=12 y=doThat z=doThat(12)=11 x=doThat(11)=10 y=10 alert(doThat(11-10)) 答え　0 そこでお聞きしたいのですが、まず１、　右上のx=12というのはdoThis(11)はnum++があるから1足して12になった、という解釈でよいのでしょうか？２、z=doThat(12)=11 の(12)は、xが12だからなのでしょうか？そして=11は、doThatがnum--だから1引かれて=11になるってことでしょうか？３、ここからが本当にさっぱり分かりません。。x=y(z);はなぜx=doThat(11)=10になるのでしょうか？y(z)の(z)はdoThat(12)=11で、xは12なのでしょうか？なぜそれx=doThat(11)=10 になるんでしょうか？４、y=10は、xがdoThat(11)=10だからそこの10が入ってるのでしょうか？５、alert(doThat(11-10))でなぜ答えが0になるんでしょうか？なぜ11-10なのに1にならないんでしょうか？分かりずらい質問の仕方で本当にすみません！頭が混乱してしまって。。それとreturnというのは関数からデータを返す、というのはなんとなくですが分かるのですが(でもたぶん分かってないです)ここではreturnはどんな働きをしてるのでしょうか？色々サイトなど探して調べてはいるのですが、なかなか僕の頭も悪いと思うのですが難しくて理解できません。もしお時間ありましたら、どなたか分かりやすく説明してもらえないでしょうか？ returnの意味だけでもいいです。すみませんよろしくお願いします！！

firefoxでfunction(e){}の e を省略するには？

<html> <body> <input type="text" onkeydown="test()"> <script> function test(){ var e=getEvent()||window.event; o=e.target||e.srcElement; o.style.backgroundColor='#f00'; alert(e.keyCode); } function getEvent(){ var ob, c = arguments.callee; while(c = c.caller) if(ob = c.arguments[0]) return ob; } なんとなく取得できているようなのですが、バグがありそうで、ご意見を！ </script> </body></html>

ツールチップにテーブル左端列の値を表示させる

こんにちは。javaScript超初心者です。現在、mySQLにクエリを投げた結果を表示するテーブルで、マウスオーバした行の左側の２列の値を、ツールチップでマウスポインタの付近に表示させることができないかと思案しています。一応、以下のサンプル（実際のデータを単純化したものです）のようなコードを書いてみたのですが、みごとに動きません。自分なりにいろいろなサイトの情報などを調べてみたのですが、なにぶん先日javaScriptの勉強を始めたばかりなもので、どこがどういけないのか見当もつきません（恐らく、全面的に間違っているのだと思います）。勉強を進めていけば、いずれは自分でわかるようになるのかもしれませんが、とりあえず近日中に実装する必要があるので、どなたかご助言をいただけないでしょうか。 ※ツールチップを表示させる方法がわからなかったので、とりあえずalertでの表示を試みています。 <html> <head> <title>左列の文字列をツールチップで表示</title> </head> <script type="text/javascript"> function tooltip_left(tid) { var rowid = "row_" + tid; //IDがtooltip_testのテーブルオブジェクトを取得 var table_ob = document.getElementById("tooltip_test"); //IDがrowidの行（オブジェクト？？）を取得 var row_ob = document.getElementById(rowid); //上記の行が何行目か調べてrow_numに格納 var row_num = table_ob.row_ob.rows //left_textに該当行の左から1番目、2番目のテキストを格納 left_text = table_ob.rows[row_num].cells[0] + ":" + table_ob.rows[row_num].cells[1]; //ツールチップが良く分からないのでalertで表示してみる window.alert(left_text); } </script> <body> <table id="tooltip_test"> <tr> <th>商品ID</th><th>商品名</th><th>データ1</th><th>データ2</th><th>データ3</th> </tr> <tr id="3" onMouseOver="tooltip_left(3)"> <td>3</td><td>テスト</td><td>12:00</td><td>12</td><td>済</td> </tr> <tr id="515" onMouseOver="tooltip_left(515)"> <td>515</td><td>サンプル</td><td>12:00</td><td>12</td><td>済</td> </tr> <tr id="9" onMouseOver="tooltip_left(9)"> <td>9</td><td>ダミー</td><td>12:00</td><td>12</td><td>済</td> </tr> </table> </body> </html>

DOMを使ったjavascript「続きを読む」（表示／非表示切替え）初期値変更について

以下は拾ってきたもので、長い文章の途中に「続きを読む」などと入れて内容を隠しておくのに使えるものだと思いますが、設置してみたところ初期値で表示状態になっています。これを非表示にするにはどの値を変更すれば良いでしょうか。 javascriptの知識がないので、教えて下さい。 // イベントリスナーの追加 function addEvent(node, evt, func) { if (node.addEventListener) { node.addEventListener(evt, func, false); } else if (node.attachEvent) { node.attachEvent("on" + evt, func); } } // イベントがあった要素を得る function getTarget(e) { if (e.target) { return e.target; } else if (e.srcElement) { return e.srcElement; } } // イベントリスナーの割り当て function setHandler() { // 文書内のdiv要素を列挙する var divElements = document.getElementsByTagName('div'); for (var i = 0; i < divElements.length; i++) { // div要素の直下の階層にあるh4要素を得る var h4Element = divElements[i].getElementsByTagName('h4')[0]; // h4要素のclickイベントにイベントリスナーを割り当てる addEvent(h4Element, "click", showHide); } } // h4要素と同じ階層にあるp要素の表示／非表示を切り替える function showHide(e) { // クリックされたh4要素を得る var h4Element = getTarget(e); // h4要素と同じ階層にあるp要素を得る var parent = h4Element.parentNode; var pElement = parent.getElementsByTagName('p')[0]; // p要素の表示／非表示を切り替える pElement.style.display = (pElement.style.display == 'none') ? '' : 'none'; } // イベントリスナーを割り当てる addEvent(window, "load", setHandler);

ドラッグで選択できるセルを指定する方法とは？

先ほども似たような質問をしているのですが、

質問者が選んだベストアンサー

お礼 2011/12/16 14:23

その他の回答 (1)

お礼 2011/12/16 18:58

関連するQ&A

ドラッグでセルを選択した後に

セルをドラッグで選択するときに、

特定の列の<td>または<th>だけにスタイルを

AIは使う人の年齢や市場にも影響する？人工知能の可能性

キーボードショートカットでthickboxなどを起動したいのですが・・・・

インラインフレーム内の変数を親ページから呼び出す

Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）

WebDatabaseのlistから選択項目表示

VBAユーザーフォームを使った入力で文字列になる

ファンクションキー制御？

クリックごとに文字色が交互に変化する（赤青赤青赤青・・・・・）

要素の表示/非表示の実験

javascriptで困っています

vb.net web 動的に作成したTableが消える

tableの中のtableが追加できない。

二つの関数を一つにまとめることが出来るでしょうか？

jquery input 要素取得

Javascriptについて質問です。

firefoxでfunction(e){}の e を省略するには？

ツールチップにテーブル左端列の値を表示させる

DOMを使ったjavascript「続きを読む」（表示／非表示切替え）初期値変更について

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

ドラッグで選択できるセルを指定する方法とは？

先ほども似たような質問をしているのですが、

質問者が選んだベストアンサー

お礼 2011/12/16 14:23

その他の回答 (1)

お礼 2011/12/16 18:58

関連するQ&A

ドラッグでセルを選択した後に

セルをドラッグで選択するときに、

特定の列の<td>または<th>だけにスタイルを

AIは使う人の年齢や市場にも影響する？人工知能の可能性

キーボードショートカットでthickboxなどを起動したいのですが・・・・

インラインフレーム内の変数を親ページから呼び出す

Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）

WebDatabaseのlistから選択項目表示

VBAユーザーフォームを使った入力で文字列になる

ファンクションキー制御？

クリックごとに文字色が交互に変化する（赤青赤青赤青・・・・・）

要素の表示/非表示の実験

javascriptで困っています

vb.net web 動的に作成したTableが消える

tableの中のtableが追加できない。

二つの関数を一つにまとめることが出来るでしょうか？

jquery input 要素取得

Javascriptについて質問です。

firefoxでfunction(e){}の e を省略するには？

ツールチップにテーブル左端列の値を表示させる

DOMを使ったjavascript「続きを読む」（表示／非表示 切替え）初期値変更について

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

DOMを使ったjavascript「続きを読む」（表示／非表示切替え）初期値変更について