テーブルの列のurlタグからテキストをjavacriptのテキストエリアに追加します

私はこのような形式のhtmlスクリプトを持っています。テーブルの列のurlタグからテキストをjavacriptのテキストエリアに追加します

<table id="LinkData"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Web URL</th> 
      <th>Point</th> 
      <th>Action</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td><a href='http://fruit-apricot.fr' id='frUrl' placeholder='Apricot'>Apricot</a></td> 
      <td>123</td> 
      <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td><a href='http://fruit-avocado.fr' id='frUrl' placeholder='Avocado'></a>Avocado</td> 
      <td>456</td> 
      <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td><a href='http://fruit-banana.fr' id='frUrl' placeholder='Banana'>Banana</a></td> 
      <td>789</td> 
      <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td><a href='http://fruit-bilberry.fr' id='frUrl' placeholder='Bilberry'>Bilberry</a></td> 
      <td>134</td> 
      <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td><a href='http://fruit-blackberry.fr' id='frUrl' placeholder='Blackberry'></a>Blackberry</td> 
      <td>154</td> 
      <td><button id='edtData'>Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
    </tbody> 
</table> 
<button id='crtList'>Crete List</button><br> 
<textarea id='txtList' width='150px' height='200px'></textarea>

私が提供したテキストエリアに挿入する表の列のプレースホルダまたはURLテキスト内の既存のテキストを取る必要があります。

"Create List"のボタンをクリックするとjavascriptが必要になります。私はやろうとしますが、しばしば1つのテキストだけが現れました。私はjavascriptを使用しています：

$(document).on("click", "#crtList", function(){ 
    var a = $("#frUrl"); 
    var i = -1; 
    var myText = $("#txtList"); 
    while (++i < a.length) { 
     if (a[i].href.indexOf("fruit") > 0) { 
      var fr = document.getElementsByTagName("a")[i].getAttribute("placeholder"); 
     } 
    } 
    myText.append(fr + ", ") 
});

タグ内のすべてのテキストをテキストエリアにコピーする必要があります。結果は次のようになります：

Apricot, Avocado, Banana, Bilberry, Blackberry,

ご協力いただきありがとうございます。

出典

2017-02-25 Fhahry

「javascript」コードを入力してください。 –

$（文書）.on（ "クリック"、 "#crtList"、機能（）{ \tするvar A = $（ "＃のfrUrl"）; \t VAR I = -1; \t VAR MYTEXT = $（」＃txtList "）; \t while（++ i 0）{ \t \t \t var fr = document.getElementsByTagName（ "a"）[i] .getAttribute（ "placeholder"）; （fr + "、" ））; – Fhahry

URLのhref値またはプレースホルダの値を指定しますか？ –

：

var totalLength = $('*[id*="frUrl"]').length; 

$('#crtList').click(function() { 
    $('*[id*="frUrl"]').each(function(index) { 
    if (index === totalLength - 1) { 
     $('#txtList').append($(this).attr('placeholder') + '.'); 
    } else { 
     $('#txtList').append($(this).attr('placeholder') + ', '); 
    } 
    }); 
});

これは、t [リスト作成]ボタンをクリックすると、プレースホルダの値が指定されたリストに追加されます。また、値はコンマで区切られ、リストの最後の項目にピリオドが追加されます。

出典

2017-02-25 03:51:11

ありがとう、それは仕事です。 – Fhahry

@ファハリーの問題はありません。私はそれを理解する方法に沿ってちょっと勉強したので、それは勝利だった。このプロジェクトの残りの部分と幸運！ –

最初に、データをバインドするにはidを重複させるのは良い方法ではありません。class editBtnをbuttonのidに置き換えます。クラスを表示して問題を解決し、サンプルコードを提供します。

コードHTML

<html> 
<table id="LinkData"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Web URL</th> 
      <th>Point</th> 
      <th>Action</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td><a href='http://fruit-apricot.fr' id='frUrl' placeholder='Apricot'>Apricot</a></td> 
      <td>123</td> 
      <td><button id='edtData' class='editBtn'>Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td><a href='http://fruit-avocado.fr' id='frUrl' placeholder='Avocado'></a>Avocado</td> 
      <td>456</td> 
      <td><button id='edtData' class="editBtn">Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td><a href='http://fruit-banana.fr' id='frUrl' placeholder='Banana'>Banana</a></td> 
      <td>789</td> 
      <td><button id='edtData' class="editBtn">Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td><a href='http://fruit-bilberry.fr' id='frUrl' placeholder='Bilberry'>Bilberry</a></td> 
      <td>134</td> 
      <td><button id='edtData' class="editBtn">Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td><a href='http://fruit-blackberry.fr' id='frUrl' placeholder='Blackberry'></a>Blackberry</td> 
      <td>154</td> 
      <td><button id='edtData' class="editBtn">Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
    </tbody> 
</table> 
<button id='crtList'>Crete List</button><br> 
<textarea id='txtList' width='150px' height='200px'></textarea> 

</html>

jQueryの

WITH JAVASCRIPT

$(function() { 
    let $edit = $(".editBtn"); 
    let $textarea = $(".editBtn"); 
    $(".editBtn").on("click", function() { 
    let href = $(this).parent().parent().children().find("a").attr("href"); 
    $(".editBtn").text(href); 
    }); 
})

あなたは純粋なJavaScriptを編集したい場合は、それは時間がかかり、外付けのです。最終的に、スクリプトにjquery libを追加することを忘れないでください。

固定コード

私は、実装するための最後のparagram.set eachを欠場。

Htmlの

<script src="https://code.jquery.com/jquery-2.2.4.js"></script><script src="https://code.jquery.com/jquery-3.1.0.js"></script><!doctype> 
<html> 
<table id="LinkData"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Web URL</th> 
      <th>Point</th> 
      <th>Action</th> 
    </thead> 
    <tbody id="mainData"> 
     <tr> 
      <td>1</td> 
      <td><a href='http://fruit-apricot.fr' id='frUrl' placeholder='Apricot'>Apricot</a></td> 
      <td>123</td> 
      <td><button id='edtData' class='editBtn'>Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td><a href='http://fruit-avocado.fr' id='frUrl' placeholder='Avocado'></a>Avocado</td> 
      <td>456</td> 
      <td><button id='edtData' class="editBtn">Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td><a href='http://fruit-banana.fr' id='frUrl' placeholder='Banana'>Banana</a></td> 
      <td>789</td> 
      <td><button id='edtData' class="editBtn">Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td><a href='http://fruit-bilberry.fr' id='frUrl' placeholder='Bilberry'>Bilberry</a></td> 
      <td>134</td> 
      <td><button id='edtData' class="editBtn">Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td><a href='http://fruit-blackberry.fr' id='frUrl' placeholder='Blackberry'></a>Blackberry</td> 
      <td>154</td> 
      <td><button id='edtData' class="editBtn">Edit</button> | <button id='delData'>Delete</button></td> 
     </tr> 
    </tbody> 
</table> 
<button id='crtList'>Crete List</button><br> 
<textarea id='txtList' width='150px' height='200px'></textarea> 

</html>

javascrip、これはあなたが探しているJS/jQueryのあるものを私はあなたのポストに理解してるから

$(function() { 
    let $edit = $(".editBtn"); 
    let $textarea = $(".editBtn"); 
    $(".editBtn").on("click", function() { 
    let href = $(this).parent().parent().children().find("a").attr("href"); 
    $(".editBtn").text(href); 
    }); 
    $("#crtList").on("click", function() { 
    $("#mainData").children().each(function() { 
     let href = $(this).find("a").attr("placeholder"); 
     let text = $("#txtList").text(); 
     $("#txtList").text(text + " " + href); 
    }); 
    }) 

})

出典

2017-02-25 03:17:55

それは仕事です、ありがとうございます。しかし、#crtList clikボタンを使ってプレースホルダ値からテキストをtexareaにコピーする必要があります。だから、私は、アプリコット、アボカド、バナナ、ビルベリー、ブラックベリーのような結果をテキストエリア（#txtList）に持っています。私のスクリプトは1つのURLから1つの結果しかコピーしません。 – Fhahry

プレースホルダ 'attr（"プレースホルダ "）を修正しました。私はあなたの必要を無視しました。 –

実際には、JavaScriptからデータをバインドしてテーブルに追加する必要があります。この状況はクローラで発生します。 –

テーブルの列のurlタグからテキストをjavacriptのテキストエリアに追加します

答えて

関連する問題