Question

我想从使用javascript的数据库中选择动态列表中的值。我的表<td>和<tr>是从数据库动态创建的。我使用for循环管理“id”属性，前面带有0,1。也喜欢选择按钮的“id”

<tr>
    <td id="pres0">Bear</td>
    <td id="cod0">ddfd</td>
    <td id="id0">23</td>
    <td><input type="button" value="select" id="id-but-select0"></td>

</tr>

<tr>
    <td id="pres1">Cat</td>
    <td id="cod1">AZ</td>
    <td id="id1">121</td>
    <td><input type="button" value="select" id="id-but-select1"></td>

</tr>
<!-- the total count of the select of the database -->  
<input id="nbra" type="hidden" value="2">

我想要的是当我点击选择按钮时，我有一个警告，显示javascript或jquery中每个td的id的值

Answer 1

我建议：

function showCellValues(e) {
    // preventing any default actions:
    e.preventDefault();

    // caching the 'this' for later use (potentially):
    var self = this,
    // creating a variable to traverse the DOM (in the while loop to follow):
        cell = self,
    // working out whether we need to use textContent or innerText to retrieve
    // a node's text:
        textProp = 'textContent' in document ? 'textContent' : 'innerText';

    // while the cell element is not a <td> element:
    while (cell.tagName.toLowerCase() !== 'td') {
        // we assign the current parentNode to the cell variable,
        // and then go again:
        cell = cell.parentNode;
    }
    // an empty array to hold the key-value pairs:
    var keyValues = [];

    // converting the NodeList of the parentNode's child elements to an Array,
    // iterating over that array with Array.prototype.forEach():
    [].slice.call(cell.parentNode.children, 0).forEach(function (el) {
        // we only want to get values from the siblings (not the cell
        // containing the clicked <input />:
        if (el !== cell) {
            // if the cell is not the current el, we push a string
            // to the keyValues array:
            keyValues.push(el.id + ': ' + el[textProp]);
        }
    });

    // showing the output; use alert, or return or whatever here to your
    // requirements:
    console.log(keyValues.join(', '));
}

// converting the NodeList of all inputs of type=button *and* value=select that
// are within a <td> element into an array, and iterating over that array:
[].slice.call(document.querySelectorAll('td > input[type="button"][value="select"]'), 0).forEach(function(button){
    // binding the 'click' event-handler function (showCellValues):
    button.addEventListener('click', showCellValues);
});

＆＃13;

function showCellValues(e) {
    e.preventDefault();
    var self = this,
        cell = self,
        textProp = 'textContent' in document ? 'textContent' : 'innerText';
    while (cell.tagName.toLowerCase() !== 'td') {
        cell = cell.parentNode;
    }
    var keyValues = [];
    [].slice.call(cell.parentNode.children, 0).forEach(function (el) {
        if (el !== cell) {
            keyValues.push(el.id + ': ' + el[textProp]);
        }
    });
    
    console.log(keyValues.join(', '));
}

[].slice.call(document.querySelectorAll('td > input[type="button"][value="select"]'), 0).forEach(function(button){
    button.addEventListener('click', showCellValues);
});

＆＃13;

<table>
    <tbody>
        <tr>
            <td id="pres0">Bear</td>
            <td id="cod0">ddfd</td>
            <td id="id0">23</td>
            <td>
                <input type="button" value="select" id="id-but-select0" />
            </td>
        </tr>
        <tr>
            <td id="pres1">Cat</td>
            <td id="cod1">AZ</td>
            <td id="id1">121</td>
            <td>
                <input type="button" value="select" id="id-but-select1" />
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

参考文献：

Array.prototype.forEach()。
Array.prototype.join()。* Array.prototype.push()。
Array.prototype.slice()。
Element.tagName。
Function.prototype.call()。
String.prototype.toLowerCase()。

Answer 2

这样做：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Show id values</title>
        <script language="javascript">
        function showValue(nodeID){
            var myVar = document.getElementById(nodeID).parentNode.parentNode.childNodes;
            var myTxt = "";
            for(i=0; i<myVar.length; i++){
                if(myVar[i].id){
                    if(myVar[i].id != ""){
                        myTxt += myVar[i].id + '\n';
                    }
                }
            }
            alert(myTxt);
        }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td id="pres0">Bear</td>
                <td id="cod0">ddfd</td>
                <td id="id0">23</td>
                <td><input type="button" value="select" id="id-but-select0" onclick="showValue(this.id)" /></td>
            </tr>

            <tr>
                <td id="pres1">Cat</td>
                <td id="cod1">AZ</td>
                <td id="id1">121</td>
                <td><input type="button" value="select" id="id-but-select1" onclick="showValue(this.id);" /></td>
            </tr>
        </table>
        <!-- the total count of the select of the database -->  
        <input id="nbra" type="hidden" value="2">
    </body>
</html>

Answer 3

您可以在按钮上添加点击事件，然后访问td的兄弟姐妹了解他们的属性，比如id，文本等。

<tr>
        <td id="pres0">Bear</td>
        <td id="cod0">ddfd</td>
        <td id="id0">23</td>
        <td><input type="button" value="select" id="id-but-select0" onclick="makeAlert(this)"></td>
</tr>

<tr>
    <td id="pres1">Cat</td>
    <td id="cod1">AZ</td>
    <td id="id1">121</td>
    <td><input type="button" value="select" id="id-but-select1" onclick="makeAlert(this)"></td>
</tr>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
function makeAlert(divObj){
    var tds = $(divObj).parent().siblings();
    tds.each(function( index ) {
      alert($( this ).attr('id') );
    });
}
</script>

Answer 4

<html>
    <head>

    </head>
    </body>
<table border="1">
<tr>
    <td id="pres0">Bear</td>
    <td id="cod0">ddfd</td>
    <td id="id0">23</td>
    <td><input type="button" value="select" id="id-but-select0"></td>

</tr>

<tr>
    <td id="pres1">Cat</td>
    <td id="cod1">AZ</td>
    <td id="id1">121</td>
    <td><input type="button" value="select" id="id-but-select1"></td>

</tr>
</table>

<!-- the total count of the select of the database -->  
<input id="nbra" type="hidden" value="2">

<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
    $('table input[type=button][value="select"]').click(function(){
        $(this).closest('table').find('tr').each(function(){
            alert($(this).find('td:eq(2)').html());
        });
    })
})
</script>

从html表中动态选择多个元素

4 个答案: