JavaScriptを使用してテーブルからセルのデータを取得する方法

Question

私はWebプロジェクトで非常に困難な時間を過ごしています。私はWeb関連の言語で新しいです。 もう一方のセルの同じ行ボタンをクリックしてセルのデータを取得したいだけです。私は写真を追加しています、これを最初に見てください。私は以下のような多くのコードにしてみてください

---（第一TRY）

は私のjsが

var tbl = document.getElementById("myTable"); 
     if (tbl != null) { 

     for (var i = 0; i < tbl.rows.length; i++) { 

       tbl.rows[i].cells[1].onclick = function(){ getval(this); }; 
     } 
    } 
    function getval(cell) { 
    value(cell.innerHTML); 
    } 

私のhtmlコード

<table class="w3-table-all w3-margin-top" id="myTable"> 
<tr> 
    <th style="width:25%;">Vendor Picture Path</th> 
    <th style="width:25%;">Vendor Heading</th> 
    <th style="width:25%;">Vendor Body</th> 
    <th style="width:25%;">Add courses</th> 
</tr> 

     echo '<tr> 
     <td>'.$row["pic_path"].'</td> 
     <td style="cursor: pointer;color:red;">'.$row["heading"].'</td> 
     <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">'.$row["body"].'</div></td> 
     <td><button>Add</button></td>     
     </tr>'; 

私のテーブルをコード - 私のSQL Serverからテーブルのデータを取得するので、データにはエコーが含まれています。

私の2回目の試行... jsのコード

var tb2=document.getElementById("myTable"); 
     if(tb2 != null) 
    { 
     for(h=0;h<tb2.rows.length;h++) 
     { 
      bf=tb2.rows[h].cells[1]; 
      tb2.rows[h].cells[3].onclick=function(){getbtval(bf);}; 
     } 
    } 

      function getbtval(cell) 
    { 
     alert(cell.innerHTML); 
    }  

と同じHTMLコード...私の結果を期待していなかったme.butため 第一1つの作業。 私のコードは2番目の結果で成功しましたが、失敗しました。すべての追加ボタンをクリックすると、2番目のセルの最後の行の最後の値が得られ、それは「ORACLE」です。

Answer 1

問題が事実であるあなたは、にイベントをバインドされていませんボタンを押すと、テーブル行のランダムなセルが選択されます。もう1つの問題は、varを使用していないという事実です。

あなたはボタンをクリックしたいが、あなたのコードはボタンを選択していないと言った。だから、場所のいたる所にイベントを追加するのではなく、ただ一つを使って、イベントの委任でそれを処理させてください。イベントを引き起こしたものを確認してください。それがボタンの場合は、行を選択するよりも、セルのテキストを読むことができます。あなたが最初の行を特定する必要があり

document.getElementById("myTable").addEventListener("click", function(evt) { 
 
    var btn = evt.target; 
 
    if(btn.tagName==="BUTTON"){ 
 
    var row = btn.parentNode.parentNode; //td than tr 
 
    var cells = row.getElementsByTagName("td"); //cells 
 
    console.log(cells[0].textContent, cells[1].textContent); 
 
    } 
 
});

<table class="w3-table-all w3-margin-top" id="myTable"> 
 
    <tr> 
 
    <th style="width:25%;">Vendor Picture Path</th> 
 
    <th style="width:25%;">Vendor Heading</th> 
 
    <th style="width:25%;">Vendor Body</th> 
 
    <th style="width:25%;">Add courses</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td>123</td> 
 
    <td style="cursor: pointer;color:red;">YYYY</td> 
 
    <td> 
 
     <div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">XXX</div> 
 
    </td> 
 
    <td> 
 
     <button>Add</button> 
 
    </td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td>456</td> 
 
    <td style="cursor: pointer;color:red;">dasdas</td> 
 
    <td> 
 
     <div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">qwwqeqwe</div> 
 
    </td> 
 
    <td> 
 
     <button>Add</button> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

が、私はこれをやった......私のコードが間違っているものを私に教えてくださいクリックイベントを生成したのはcellです。最後の行のセルにforループ、bf点後

bf=tb2.rows[h].cells[1]; 
tb2.rows[h].cells[3].onclick=function(){getbtval(bf);}; 

のでgetval(bf)は、それの値を返します。

適切なセルにアクセスするには、@epascarelloが示唆するようにDOMトラバーサルを行います。あなたのユースケースによっては、また、データ属性を使用する方が簡単かもしれません：

<button data-value="Cisco"> 

そしてJSコードであなたのコードで

button.onclick = function() { alert(this.dataset.value); } 

Answer 3

cell.onclick = function(){ getval(this); }; 

thisは、「現在のコンテキスト」を意味jqueryの使用してTDにIDを割り当て、テキストをつかんで

Answer 4

はこのためにあなたがテーブル全体にイベントリスナーを追加することにより、現在のクリックされた要素をチェックし、ターゲットがボタンの場合に確認することができ、クリックされました。

イベントターゲットをボタンとして取得したら、その親のtdと親のtrを見つけます。あなただけ

document.getElementById("myTable").addEventListener("click",function(e){   
 
    e = e || event 
 
    var target = e.target || e.srcElement; 
 
    if (target.nodeName != 'BUTTON') return  
 
    var row = target.parentNode.parentNode; 
 
    row.childNodes.forEach(function(item){ 
 
    if(item.nodeType !== 3) 
 
    { 
 
     console.log(item.textContent); 
 
     console.log(item.innerHTML); 
 
    } 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="w3-table-all w3-margin-top" id="myTable"> 
 
<tr> 
 
    <th style="width:25%;">Vendor Picture Path</th> 
 
    <th style="width:25%;">Vendor Heading</th> 
 
    <th style="width:25%;">Vendor Body</th> 
 
    <th style="width:25%;">Add courses</th> 
 
</tr> 
 
<tr> 
 
    <td>cisco-networking.jpg</td> 
 
    <td style="cursor: pointer;color:red;">CISCO</td> 
 
    <td><div style="width:100%;height: 60px;margin: 0;padding: 0;overflow-y: scroll">CISCO systems</div></td> 
 
    <td><button>Add</button></td>     
 
</tr> 
 
</table>