htmlテーブルから行（ハイライト）を選択し、ボタンのクリックで値を送信してください

ハイライトはウェブブラウザでは機能しません。このコードの問題は何ですか？基本的には、テーブルの行をハイライト表示し、別のPHPページにテーブル行の値を投稿したいと思っています。htmlテーブルから行（ハイライト）を選択し、ボタンのクリックで値を送信してください

<html> 
<head> 
<link href="test.css" rel="stylesheet" type="text/css" /> 
<script src="test.js" type="text/javascript"></script> 
</head> 
<body> 
<table id="table"> 
    <tr> 
     <td>1 Ferrari F138</td> 
     <td>1 000€</td> 
     <td>1 200€</td> 
     <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> 
     <td>1</td> 
     <td>F138</td> 
     <td>Klik pre detaily</td> 
    </tr> 
    <tr> 
     <td>2 Ferrari F138</td> 
     <td>1 000€</td> 
     <td>1 200€</td> 
     <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> 
     <td>1</td> 
     <td>F138</td> 
     <td>Klik pre detaily</td> 
    </tr> 
    <tr> 
     <td>3 Ferrari F138</td> 
     <td>1 000€</td> 
     <td>1 200€</td> 
     <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td> 
     <td>1</td> 
     <td>F138</td> 
     <td>Klik pre detaily</td> 
    </tr> 
</table> 

    <input type="button" id="tst" value="OK" onclick="fnselect()" /> 
</body> 
</html>

test.js

function highlight(e) { 
    if (selected[0]) selected[0].className = ''; 
    e.target.parentNode.className = 'selected'; 

} 

var table = document.getElementById('table'), 
    selected = table.getElementsByClassName('selected'); 
table.onclick = highlight; 

function fnselect(){ 
var $row=$(this).parent().find('td'); 
    var clickeedID=$row.eq(0).text(); 
    // alert(clickeedID); 
} 

$("#tst").click(function(){ 
    var value =$(".selected td:first").html(); 
    value = value || "No row Selected"; 
    alert(value); 
});

試験

test.htmlという。 CSS

td {border: 1px #DDD solid; padding: 5px; cursor: pointer;} 

.selected { 
    background-color: brown; 
    color: #FFF; 
}

出典

2016-04-27 Jacob Chong

http://stackoverflow.com/questions/24750623/select-a-row-from-html-table-and-send-values-onclick-of-a-buttonあなたはこの質問を確認することができます –

うん、私はチェックしたが、ハイライト機能は実行されません、私はこれらのコードから問題のエラーは何か分からない。 –

あなたのコードをjsfiddleに貼り付けるだけで問題なく動作しているようです。あなたはCSSパスを正しく含めていないかもしれないし、別のエラーが出ているかもしれません。 – TomDillinger

あなたはfnselect（）関数を必要としない

としてあなたのjsを変更します。

window.onload = function() { 
    function highlight(e) { 
     if (selected[0]) selected[0].className = ''; 
     e.target.parentNode.className = 'selected';  
    }  
    var table = document.getElementById('table'), 
     selected = table.getElementsByClassName('selected'); 
    table.onclick = highlight; 

     $("#tst").click(function() { 
     var value = $(".selected td:first").html(); 
     value = value || "No row Selected"; 
     alert(value); 
    }); 
};

も頭の中で他のtest.js前に、あなたのhtmlでjqueryのを追加します。

を

最後に行のデフォルトの1つを選択します。

出典

2016-04-27 05:53:37 Khyati

htmlテーブルから行（ハイライト）を選択し、ボタンのクリックで値を送信してください

答えて

関連する問題